微信小程序、taro、uniapp图片上传

视图

<View className='userinfo-content-layout'>
  {
    (process.env.TARO_ENV === 'h5' && navigator.userAgent.indexOf("MicroMessenger") == -1) ?
    <View className='userinfo-img-box'>
      <View className='userinfo-img-view'>
        <input className='userinfo_input' id='fileView' type='file' capture='camera'
          accept="image/gif,image/jpeg,image/jpg,image/png" onChange={this.uploadImg.bind(this)}></input>
        <Image src={headUrl} className='userinfo-img' onClick={this.uploadImg.bind(this)} mode='aspectFill'></Image>
      </View>
    </View>
    : <View className='userinfo-img-box'>
        <View className='userinfo-img-view'>
          <Image src={headUrl} className='userinfo-img' onClick={this.uploadImg.bind(this)} mode='aspectFill'></Image>
        </View>
    </View>
  }
</View>

视图样式

.userinfo-img-box{
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 40px;
  .userinfo-img-view{
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1PX solid #054b6c;
  }
  .userinfo-img{
    width: 100%;
    height: 100%;
    display: block;
    border: 1PX solid #054b6c;
    border-radius: 50%;
  }
  .userinfo_input{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    z-index: 10;
  }
}

选择上传Taro.chooseImage()

// 上传图片
 async uploadImg(e){
   const self = this
   if (process.env.TARO_ENV === 'weapp'){
     Taro.chooseImage({
       count: 1,   // 可选图片数量, 这里限制为1张
       sizeType: ['original', 'compressed'], // 可以指定是原图还是缩图，默认二者都有
       sourceType: ['album', 'camera'],  // 可以指定来源是相机还是相册，默认二者
       success(res){
         const tempFilePaths = res.tempFilePaths
         self.upload(tempFilePaths)
       }
     })
   } else if (process.env.TARO_ENV === 'h5') {
     if (navigator.userAgent.indexOf("MicroMessenger") != -1){
       var wx = require('m-commonjs-jweixin');
       wx.ready(function() {
         wx.chooseImage({
           count: 1,   // 可选图片数量, 这里限制为1张
           sizeType: ['original', 'compressed'], // 可以指定是原图还是缩图，默认二者都有
           sourceType: ['album', 'camera'],  // 可以指定来源是相机还是相册，默认二者
           success(res){
             const localIds = res.localIds   // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片 
             self.upload(localIds)
           }
         })
       })
     } else {
       // 显示选择的图片
       let localIds = e.target.files[0]
       self.upload(localIds)
     }
   }
 }
 // 上传头像调用接口
 async upload(tempFilePaths) {
   await uploadImgOss(tempFilePaths).then(res => {
     this.setState({
       headImg: res,	
       headUrl: shoppUrlImg + res
     })
   })
 }

请求接口

function uploadImg(imgList = []) {
  Taro.showLoading({
    title: '上传中'
  })
  //小程序
  if (process.env.TARO_ENV === 'weapp') {
    let promiseList = imgList.map((item) => {
      let name = item.split('.')	// 处理后台接收参数
      name = name[name.length-2] + '.' + name[name.length-1]
      return new Promise(resolve => {
        Taro.uploadFile({
          url: shoppUrl + api.uploadImg,
          filePath: item,
          filePath: item,
          name: 'file',
          formData: {
            headImg: item,
            fileName: name,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
            'cookie': Taro.getStorageSync('cookie')
          },
          success: (res) => {
            const data = JSON.parse(res.data).data;
            resolve(data);
          }
        });
      });
    });
    const result = Promise.all(promiseList).then((res) => {
      Taro.hideLoading()
      return res;
    }).catch((error) => {
    });
    return result;
  } else if (process.env.TARO_ENV === 'h5') {
    if (navigator.userAgent.indexOf("MicroMessenger") != -1) {
      var wx = require('m-commonjs-jweixin');
      //公众号
      return new Promise(resolve => {
        var imagesList = []
        var localIds = imgList
        function upload() {
          var localId = localIds.toString()
          wx.uploadImage({
            localId: localId,
            success: function (res) {
              var mediaId = res.serverId.substring(0, 6) + '.' + 'png';
              wx.getLocalImgData({
                localId: localIds.toString(), // 图片的localID
                success: function (respo) {
                  var localData = respo.localData; // localData是图片的base64数据，可以用img标签显
                  if (localData.indexOf('data:image') != 0) {
                    //判断是否有这样的头部
                    localData = 'data:image/jpeg;base64,' +  localData
                  }
                  shoppRequest.post(api.h5UploadImg, {
                    base64String: localData,
                    fileName: mediaId,
                  }).then(
                    res => {
                      const data = res.data.data
                      imagesList.push(data)
                      Taro.hideLoading()
                      resolve(imagesList)
                    }
                  )
                  // localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
                },fail:function(respo){
                  alert("显示失败:"+JSON.stringify(respo))
                }
				      });
            },
            fail: function (error) {
              alert('errorerrorerror'+error)
            }
          })
        }
        upload()
      })
    } else {
      // 非微信浏览器打开
      return new Promise(resolve => {
        console.log('resolve222',resolve)
        shoppRequest.uploadImg(api.uploadImg, {
          file: imgList,
          fileName: imgList.name
        }).then(res => {
          Taro.hideLoading()
          console.log('res42423',res)
          resolve([res.data]);
        })
      });
    }
  }
}

封装统一请求的方法

export default {
  baseOptions(params, method = 'GET') {
    let { url, data } = params

    let contentType = 'application/x-www-form-urlencoded'
    contentType = params.contentType || contentType
    const option = {
      isShowLoading: false,
      loadingText: '正在加载',
      url: shoppUrl + url, 
      credentials: 'include',     // h5请求接口要传cookie
      data: data,
      method: method,
      header: { 
        'content-type': contentType,
        'cookie': Taro.getStorageSync('cookie') || ''
      },
      success(res) { 
        if (res.statusCode === HTTP_STATUS.NOT_FOUND) {
          return logError('api', '请求资源不存在')
        } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) {
          return logError('api', '服务端出现了问题')
        } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) {
          return logError('api', '没有权限访问')
        } else if (res.statusCode === HTTP_STATUS.SUCCESS) {
          if(res.header['Set-Cookie'] || res.header['set-cookie']){ // 兼容微信、字节跳动
            if (process.env.TARO_ENV === 'tt'){
              Taro.setStorageSync('cookie', res.header['set-cookie'])
            } else {
              Taro.setStorageSync('cookie', res.header['Set-Cookie'])
            }
          }
          var data = res.data
          return data
        }
      },
      // 请求超时
      fail(res) {
        Taro.hideLoading();
        return res;
      },
      error(e) {
        logError('api', '请求接口出现问题', e)
      }
    }
    return Taro.request(option)
  },
  get(url, data = '') {
    let option = { url, data }
    return this.baseOptions(option)
  },
  post: function (url, data, contentType) {
    let params = { url, data, contentType }
    return this.baseOptions(params, 'POST')
  },
  // 这是封装上传头像的请求(微信外的浏览器)
  uploadImg: function (url, data) {   
    return new Promise(function (resolve, reject) {
      var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActionXObject("Microsoft.XMLHTTP");
      var u = shoppUrl + url;
      var m = "POST";
      var t = true;
      var d = data;
      
      var form = null;
      if (m === "POST") {
        form = new FormData();
        for (var key in d) form.append(key, d[key]);
        request.open(m, u, t)
      } else {
        var param = [];
        for (var key in d) param.push(key + "=" + d[key]);
        request.open(m, u + "?" + param.join("&"), t)
      }
      // console.log("Taro.getStorageSync('cookie')")
      // console.log(Taro.getStorageSync('cookie'))
      // request.setRequestHeader('Set-Cookie', Taro.getStorageSync('cookie'))
      // request.setRequestHeader("Access-Control-Allow-Credentials", "true")
      request.withCredentials = true   // 跨域问题
      request.crossDomain = true
      request.credentials = true
      request.send(form)
      request.onreadystatechange = function () {
        if (request.readyState === 4) {
          if (request.status >= 200 && request.status < 400) {
            console.log(JSON.parse(request.response))
            resolve(JSON.parse(request.response));
          } else {
            console.error(request.status)
          }
        }
      }
    })
  }
}

插入链接与图片

链接: taro上传图片api.

图片: 最后的效果