小程序OSS验签上传阿里云服务器并同时上传多张图片

本文链接：https://blog.youkuaiyun.com/m0_63111438/article/details/131716420

html 静态页面

 <view class='customSignContent'>
    <view>
      <view class='title' style="margin-bottom: 20rpx;">上传图片</view>
      <view style="margin-bottom: 20rpx; color: rgb(167, 168, 168);font-size: 20rpx;">
        最多上传6张图片
      </view>
      <view class="imageFlex">
        <view class="uploadImage" bindtap="upload" wx:if="{{imageArr.length < 6}}">
          <image class="img" src="https://tq-dispatch.oss-cn-shenzhen.aliyuncs.com/image/stock/upload1.png" alt="" />
        </view>
        <view class="uploadImage" wx:for="{{imageArr}}" wx:key="index">
          <image class="img" src="{{item}}"></image>
          <image bindtap="remove" data-index="{{index}}" class="icon" src="https://tq-dispatch.oss-cn-shenzhen.aliyuncs.com/image/stock/delete.png"></image>
        </view>
      </view>
      <view bindtap="suClick" class="submitTo">
        <text>提交</text>
      </view>
    </view>
  </view>

添加图片链接https://tq-dispatch.oss-cn-shenzhen.aliyuncs.com/image/stock/upload1.png

如下

wx:if="{{imageArr.length < 6}}" 是为了判断上传后显示图片的张数 imageArr是自定义图片存放的数组上传六张后就不能上传了

upload 点击事件小程序会存在this指向问题所以重新赋值 const tath = this

wx.chooseMedia 小程序上传图片的APIhttps://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html

上传res 会返回 tempFiles 的数组多张就回返回多个对象

oss 验签所需要的参数

valueArr[valueArr.length - 1] 通过for 循环获取到图片本地资源的后缀

filename 随机字符串 + 后缀名拼接

for 循环tempFiles 获取到里面的数组

wx.uploadFile 提交到小程序服务器

https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

filePath: imgs[i] 本地资源路径是for出来的每一个值

imageArr 最后拿到拼接 push 到数组里面

js 部分全部代码

 // oss验签上传图片
    upload() {
      const tath = this
      wx.chooseMedia({
        count: 6, //手机相册限制勾选几张  比如6张 就写6
        mediaType: ['image'], // 只能上传图片 还有个属性是可以上传视频
        sourceType: ['album', 'camera'], // 来源
        camera: 'back', //后置摄像头
        success(res) 
          let imgs = []
          let valueArr = []
          // 需要oss 验签  此处是调取验签的接口  
          getOssData(res).then((r) => {
            const arr = res.tempFiles
            // arr 是为了获取上传图片反的数组
            arr.forEach((e) => {
              return imgs.push(e.tempFilePath)
            })
            for (var i = 0; i < imgs.length; i++) {
              let only = imgs[i].split('.')
              valueArr.push(
                only[only.length - 1]
              )
              let filename = parseInt(Math.random() * 1000000 + new Date().getTime()) + '.' + valueArr[valueArr.length - 1]
              let httpData = {
                Key: r.data.dir + filename,
                OSSAccessKeyId: r.data.accessId,
                Policy: r.data.policy,
                Signature: r.data.signature,
              }
              wx.uploadFile({
                url: r.data.host,
                filePath: imgs[i],
                formData: httpData,
                fileType: 'image',
                name: 'file',
                timeout: 15000,
                header: {
                  'Content-Type': 'application/x-www-form-urlencoded',
                },
                success: (res) => {
                  if (res.statusCode == 204) {
                    tath.data.imageArr.push(`${r.data.host}/${r.data.dir}${filename}`)
                    tath.setData({
                      imageArr: tath.data.imageArr
                    })
                  } else {
                    // 返回错误信息
                    resolve({
                      errMsg: res.errMsg
                    })
                  }
                },
                fail: function (res) {
                  console.log(res);
                }
              })
            }
          })
        }
      })

    },

删除图片

remove(index) {
      const myindex = index.target.dataset.index
      const imageArr = JSON.parse(JSON.stringify(this.data.imageArr))
      imageArr.splice(myindex, 1)
      this.setData({
        imageArr
      })
    },

最后suClick 提交的方法我没有写看后端需要什么要数组图片就直接传imageArr 即可其他的就需要你们转啦

样式就比较简单啦自己调整一下就好啦 flex 布局很方便的