微信小程序总结

微信小程序前端直传

1. 通过微信 API 调起相册或者摄像头

2. 调用获取 oss 配置接口

3. 设置 key（key 为 oss 云上的文件夹+文件名）

4. 通过微信 API 调起上传

附：1、oss 服务器通过 http 请求的 code 状态码告知前端是否上传成功

2、该方案服务器无感知，需要配好key，在表单提交的时候将key发送给服务器

// 选择图片
  choosePhoto () {
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      success: res => {
        this.uploadPhoto(res);
      }
    })
  },
// 直传oss
  async uploadPhoto (res) {
    wx.showLoading({ title: '处理中...' });

    let r = await getPolicy()
    if (r.code != 200) {
      wx.showToast({icon: 'none', title: '获取oss配置异常'})
      return
    }

    let ret = r.data
    var tempFilePaths = res.tempFilePaths
    // key为oss云上的文件夹+文件名
    let key = `${ret.dir}img_${new Date().getTime()}.${tempFilePaths[0].split('.').pop()}`
    // console.log('chooseImage success, temp path is: ', tempFilePaths[0])

    wx.uploadFile({
      url: ret.host,
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        name: tempFilePaths[0],
        key: key,
        policy: ret.policy,
        OSSAccessKeyId: ret.accessid,
        success_action_status: "200",
        signature: ret.signature,
      },
      success: (res) => {
        wx.hideLoading()
        // console.log('chooseImage success, temp path is: ', tempFilePaths[0])
        this.setData({
          'photoPath': tempFilePaths[0],
          'rqdata.teamLogoKey': key
        })
        wx.showToast({
          title: "上传成功",
          icon: 'success',
          duration: 1000
        })
      },
      fail: ({errMsg}) => {
        wx.hideLoading()
        // console.log('upladImage fail, errMsg is: ', errMsg)
        wx.showToast({
          title: "上传失败",
          duration: 1000
        })
      },
    })
  },