小程序中使用oss上传

oss是直接通过阿里云的上传方式，说说我之前的做法吧

1. 第一步，封装接口

/*
  API-OSS文件管理（$get是我这边封装好的请求方式）
*/
// 获取OSS签名
export const GET_OSS_SIGN = () => $get('/oss/signature')

2. 请求获取oss签名内容

    getLOSSSign () {
      const vm = this
      vm.$loading.show()

      GET_LIZHENG_OSS()
        .then(r => {
          // 返回值可能有许多中，这个根据后台返回状态为准
          if (r.statusCode === 200) {
            // r.data中包含了许多需要使用的参数，单起一个方法进行处理
            vm.uplodeImgALY(r.data)
          } else {
            vm.$toast(r.data.message)
          }
          vm.$loading.close()
        })
        .catch(e => {
          vm.$loading.close()
          console.error(e)
        })
    },

3. 拿到签名内容作出相应处理

uplodeImgALY (ossForm) {
      const vm = this
      // 其中 policy, accessid, signature 都是上传中formData需要的参数
      // host为上传签名中返回的地址
      // dir为自己进行拼接的服务器地址中的目标文件
      // 处理完成之后进行小程序原生上传请求即可
      let { policy, accessid, signature, host, dir } = ossForm
      let timestamp = Date.parse(new Date())
      let userId = vm.$cookie.get('account').id
      wx.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
          // 存放到服务器的文件的唯一名称
          let filePath = res.tempFilePaths[0]
          let fileName = filePath.lastIndexOf('.') // 取到文件名开始到最后一个点的长度
          let fileNameLength = filePath.length // 取到文件名长度
          let fileFormat = filePath.substring(fileName + 1, fileNameLength) // 截
          let setImg = `${dir}${timestamp}_${userId}.${fileFormat}`
          wx.uploadFile({
            url: `${host}`,
            filePath,
            header: {
              'Content-Type': 'multipart/form-data'
            },
            name: 'file',
            formData: {
              key: setImg,
              policy,
              OSSAccessKeyId: accessid,
              success_action_status: '200',
              signature
            },

            success: function (res) {
              if (res.statusCode === 200) {
              	// 我这个地方是图片，需要上传成功后展示，所以就再一次进行了拼接并展示
                vm.imgList.push(`${host}/${setImg}`)
              } else {
                vm.$toast('上传失败')
              }
            },
            fail: function (err) {
              console.info(err)
            }
          })
        },
        fail: function (err) {
          console.info(err)
        }
      })
    }

总结

• 思路就是获取签名
• 从签名中获取到上传请求需要的参数
• 每次上传自动生成存放到服务器的唯一文件名
• 上传成功后就能够将签名中的请求地址和自身设置的文件名称拼接进行访问

好吧，大概就是这样，闲暇之余做出点分享也算是个记录吧