微信小程序图片上传oss

//封装防止重名方法
  randomWord(randomFlag, min, max) {
    let str = "",
      range = min,
      arr = [
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
        'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
        'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
      ];

    if (randomFlag) {
      range = Math.round(Math.random() * (max - min)) + min; // 任意长度
    }
    var pos = ""
    for (let i = 0; i < range; i++) {
      pos = Math.round(Math.random() * (arr.length - 1));
      str += arr[pos];
    }
    return str;
  },
  //randomWord(false,20,25) //NtOSS6Iu2MevogBOICmI
  touchphoto() {
    var that = this
    //调用微信显示操作菜单接口
    wx.showActionSheet({
      itemList: ['拍照', '从手机相册选择'],
      success: function (res) {
        var flag = !!res.tapIndex ? ['album'] : ['camera'];
        wx.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: flag, // 可以指定来源是相册还是相机,默认二者都有
          success: function (res) {
            // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
            // 此时拿到的是本地路径 例如:tempFilePaths :["http://tmp/wx62440cc50d4f7cac.o6zAJszd8EVJvxAaVl2I….XJUfRFzv2cqy2eddd4920d5e1d5427b8a151c1db3641.png"]
            var tempFilePaths = res.tempFilePaths
            // 遍历用户上传的图片
            for (let i = 0; i < tempFilePaths.length; i++) {
            // lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,目的是找到最后一个 '.'的下标
              let n = tempFilePaths[i].lastIndexOf('.');
              // substring() 方法用于提取字符串中介于两个指定下标之间的字符,拿到 '.png'
              let type = tempFilePaths[i].substring(n);
              // 接口请求 调用oss上传签名接口
              wx.request({
                url: soa_http_host + '/api/generalservice/common/getOssUploadInfo?FileType=image',
                success: function (res) {
                  if (res.data.success) {
                  //接口返回数据 dir:oss文件路径名 例如:'image/';host:公司阿里云地址; policy:相当于密钥;signature: 签名;accessid:访问id
                    let post = res.data.result;
                    //我这里又做了一层拼接码,防止重名...因为当时写的太简单了,导致测试环境的图片覆盖了正式环境
                    const tiemCode = Date.parse(new Date().toDateString()) / 1000
                    var myDate = new Date()
                    var newType = myDate.getTime() + myDate.getHours() + myDate.getMinutes() + myDate.getSeconds() + myDate.getMilliseconds() + Math.ceil(Math.random() * 1000000)
                    // 拼接后的图片文件名 1609795218100bRiPjyhFjumKiUcx56Zu
                    const fileKey = tiemCode + newType + that.randomWord(false, 20, 25)
                    // 拼接完整图片地址 images/1609795218100bRiPjyhFjumKiUcx56Zu.png
                    const aliyunFileKey = post.dir + fileKey + type;
                    // 图片名 1609795218100bRiPjyhFjumKiUcx56Zu.png
                    const name = fileKey + type
                    that.setData({
                      name :name,
                      aliyunFileKey: aliyunFileKey
                    })
                    // 调用微信接口 将本地资源上传到服务器
                    wx.uploadFile({
                      url: post.host, //上传到OSS
                      filePath: tempFilePaths[i],
                      name: 'file',
                      formData: {
                        'key': aliyunFileKey,//拼接完的图片名字
                        'OSSAccessKeyId': post.accessid,//通行id
                        'policy': post.policy,//密钥
                        'signature': post.signature,//签名
                        'success_action_status': '200'
                      },
                      success: function (res) {
                        console.log("阿里云", res)  //上传阿里云
                        that.createPhoto()
                      }
                    })
                  } else {
                    app.monitorIntMallApi("/getOssUploadInfo")
                  }
                },
                fail: function (res) {
                  console.log("fail", res)
                }
              })
            }
          }
        })
      }
    })

  },
  // 转换
  createPhoto() {
    var that = this
    // 调用保存图片
    wx.request({
      url: soa_http_host + '/api/generalservice/common/createPicture',
      header: {
        "Content-Type": "application/json",
        "Authorization": 'Bearer ' + that.data.accToken
      },
      method: "POST",
      data: {
        "name": that.data.name,// 1609795218100bRiPjyhFjumKiUcx56Zu.png
        "objectKey": that.data.aliyunFileKey, //images/1609795218100bRiPjyhFjumKiUcx56Zu.png
        "isSecret": false
      },
      success: function (res) {
        // 返回带cdn地址完整的图片链接 https://img-cdn.****.co/image/1609798274529JFpvJ1pR2IECUOC3pJcB.png?x-oss-process=image/resize,w_240
        if (res.data.success) {
          that.setData({
            realPic: res.data.result.pictureUrl, //小程序端展示
            realId: res.data.result.id,
            photo: res.data.result.thumbPictureUrl
          })
          wx.showToast({
            title: '上传成功!',
            duration: 2000
          })
        } else {
          app.monitorIntMallApi("/createPicture")
        }

      }
    })
  },

完成。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值