Taro 項目實現更改微信頭像，使用七牛上傳圖片

一、效果圖

 

二、taro 提供了選擇圖片的接口

https://taro-docs.jd.com/taro/docs/apis/media/image/chooseImage

// 文檔提供的示例
Taro.chooseImage({
  count: 1, // 默認9
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
  sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有，在H5瀏覽器端支持使用 `user` 和 `environment`分別指定爲前後攝像頭
  success: function (res) {
    // 返回選定照片的本地文件路徑列表，tempFilePath可以作爲img標籤的src屬性顯示圖片
    var tempFilePaths = res.tempFilePaths
  }
})

三、代碼實現

分兩個部分： 使用七牛上傳圖片、更換個人信息

1、使用七牛上傳圖片

上傳七牛先要獲取到七牛的token，這是後端提供獲取token的接口

後端提供把圖片上傳到七牛的接口

更換個人信息的接口

在工具文件中中封裝好了上傳到七牛的請求函數

/**
 * 上傳到七牛
 * @param [] list , list 裏面是 file Object 的 Array { url: 本地鏈接, file: 源文件}
 */
const transImgList = async (list) => {
  let imgTransPromise = list.map (item => {
    const qiniuTokenData = getGlobalData('qiniuTokenData');  //從緩存中獲取的token
    const otherparams = getSignDataAndOtherParams()  // 請求的必填參數，看自己的項目
    // console.warn('item.url', item.url)
    //appConfig.apiPrefix  是自己的服務器地址
    return Taro.uploadFile({
      url: `${appConfig.apiPrefix}/upload/img/one?${stringify(otherparams)}`,
      filePath: item.url,
      name: 'file',
      header: {
        Authorization: `token ${qiniuTokenData.token}`  //把token拿到，看自己的數據來獲取
      },
      formData: {
        key: item.url
      },
    }).then ((res) => {
      let newImg = '';
      try {
        newImg = JSON.parse(res.data)['fileURL'];
      } catch (error) {
        newImg = '';
      }
      return newImg;
    })
  });

  let imgs = await Promise.all(imgTransPromise).then((imgList) => {
    return imgList
  });

  return imgs;  // 請求成功會返回圖片的地址
}

在更換個人信息的頁面中，在頁面掛載的時候，獲取到token

  componentDidMount() {
    // 獲取七牛Token
    this.props.dispatch({
      type: 'qiniuUploader/fetchgetQiniuToken'   // 使用的是dva狀態管理，請求獲取token的接口
    }).then(res => {
      setGlobalData('qiniuTokenData', res.response.data) // 把token存儲在全局緩存中
    })
  }

頁面顯示， 點擊頭像區域觸發回調handleOperaClick

 <View className="portrait flex-box jc-sb ai-ce" onClick={this.handleOperaClick} data-flag="portrait">
     <Text className="portrait-text flex-box ai-ce" >頭像</Text>
     <Image className="portrait-image flex-box ai-ce" src={utils.deepGet(userInfo, 'headImg')} />
  </View>

回調handleOperaClick 

  handleOperaClick = (e) => {
    e.preventDefault();
    let {
      flag,
    } = e.currentTarget.dataset;
    switch (flag) {
      case 'portrait': {
        // 從手機相冊中選擇圖片或使用相機拍照
        Taro.chooseImage({
          count: 1, 
          sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
          sourceType: ['album', 'camera'],  // 可以指定來源是相冊還是相機
        }).then( async (res)=> {  //我使用鏈式寫法，也可以使用官方文檔提供的方式
          console.warn('chooseImage then', res)
          const files = [];  
          // 以下幾行代碼是爲了處理成自己想要的格式[{file: {path: '', size: ''}, url: '' }]
          const obj = {};
          obj.file = res.tempFiles[0];
          obj.url = res.tempFilePaths[0];
          files.push(obj);  
          console.warn('then obj', files)
          // 上傳到七牛返回的圖片連接，可以在線訪問
          const itemImgUrlLIst = await utils.transImgList(files || [])
          console.warn('then itemImgUrlLIst', itemImgUrlLIst)
          Taro.showLoading();
          // 把返回的鏈接傳給更換個人信息的接口，完成頭像更換
          this.props.dispatch({
            type: 'mine/fecthupdatePersonInfo',
            payload: {
              headImg: itemImgUrlLIst[0]  // 因爲是個數組，獲取數組第一個元素
            }
          }).then(res => {
            if (res.resultCode === 200) {
              Taro.hideLoading();
              utils.showToastMsg('更換頭像成功');
              // 更換調全局緩存的數據，要不顯示不出來
              const userInfo = getGlobalData('userInfo');
              userInfo.headImg = itemImgUrlLIst[0];
              setGlobalData('userInfo', userInfo);
              this.componentDidMount();
            }
          })
        })
        break;
      }
      case 'name': {
        Taro.navigateTo({
          url: `/subMinePages/UpdateName/UpdateName`
        })
        break;
      }

      case 'phone': {
        Taro.navigateTo({
          url: `/subMinePages/UpdatePhone/UpdatePhone`
        })
        break;
      }

      case 'address': {
        Taro.navigateTo({
          url: `/subMinePages/MyAddress/MyAddress`
        })
        break;
      }
      default: {
        break;
      }
    }
  }

以上是更換個人頭像的大致流程，其他如上傳評論圖片、售後添加圖片等一些需要上傳圖片的頁面，也類似的操作。