小程序图片上传(包含上传oss)

1,普通上传(单图包括多图)

upload() {
    let url = 'https://***************';
    let name = 'file'
    let _this = this
    let i = 0
    $.chooseImage(3 - this.data.imgUrlArr.length).then((filePath) => {
      console.log(filePath)
      this.setData({
        image: filePath
      })
      this.batchUploadImg(url, filePath, i, name)
    })
  },
  batchUploadImg(url, filePath, i, name) {
    let _this = this
    wx.showLoading({
      title: '正在上传...',
      mask: true,
      success: () => {
        wx.uploadFile({
          url: url,
          filePath: filePath[i],
          name: name,
          success: function (res) {
            if (res.statusCode == 200) {
              let data = JSON.parse(res.data)
              console.log(data)
              if (data.status == 1) {
                let image = _this.data.imgUrlArr;
                image.push(data.data.url)
                return (
                  _this.setData({
                    imgUrlArr: image,
                  }),
                  console.log(_this.data.imgUrlArr)
                )
              } else {
                console.log(res.msg)
              }
            }
          },
          fail: function (res) {},
          complete: function (res) {
            wx.hideLoading()
            console.log(res)
            i++
            if (i < filePath.length) {
              _this.batchUploadImg(url, filePath, i, name)
            }
          },
        })
      }
    })
  },
   delImg(e) {
    let _this = this;
    let index = parseInt(e.currentTarget.dataset.index);
    let imgUrlArr = this.data.imgUrlArr;
    wx.showModal({
      title: '删除',
      content: '确定删除这张照片',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
          imgUrlArr.splice(index, 1)
          _this.setData({
            imgUrlArr: imgUrlArr,
            maintain_pic: imgUrlArr.join()
          })
          console.log(_this.data.maintain_pic)
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },

2,上传oss
在网上找了一圈试了可以单图上传,但是上传第二张会把第一张删掉,自己改版了一下
(一般有6个js文件base64,config(是放oss的key,链接的),crypto,hmac,sha1,最重要的是uploadImg)

uploadImg文件
const env = require('config.js'); //配置文件,在这文件里配置你的OSS keyId和KeySecret,timeout:87600;

const base64 = require('base64.js'); //Base64,hmac,sha1,crypto相关算法
require('hmac.js');
require('sha1.js');
const Crypto = require('crypto.js');

/*
 *上传文件到阿里云oss
 *@param - filePath :图片的本地资源路径
 *@param - dir:表示要传到哪个目录下
 *@param - successc:成功回调
 *@param - failc:失败回调
 */
const batchUploadImg = (filePath, i, name, successc, failc) => {
  // let fileTypeIndex = filePath.lastIndexOf('.');
  // let fileType = filePath.substring(fileTypeIndex);
  //图片名字 可以自行定义,     这里是采用当前的时间戳 + 150内的随机数来给图片命名的
  const aliyunFileKey = new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
  // const aliyunFileKey = new Date().getTime() + Math.floor(Math.random() * 150) + fileType;
  const aliyunServerURL = env.uploadImageUrl; //OSS地址,需要https
  const accessid = env.OSSAccessKeyId;
  const policyBase64 = getPolicyBase64();
  const signature = getSignature(policyBase64); //获取签名
  wx.showLoading({
    title: '正在上传...',
    mask: true,
    success: () => {
      wx.uploadFile({
        url: aliyunServerURL, //开发者服务器 url
        filePath: filePath[i], //要上传文件资源的路径
        name: 'file', //必须填file
        formData: {
          'key': aliyunFileKey,
          'policy': policyBase64,
          'OSSAccessKeyId': accessid,
          'signature': signature,
          'success_action_status': '200',
        },
        success: function (res) {
          if (res.statusCode != 200) {
            failc(new Error('上传错误:' + JSON.stringify(res)))
            return;
          }
          successc(aliyunServerURL + aliyunFileKey);
        },
        fail: function (err) {
          err.wxaddinfo = aliyunServerURL;
          failc(err);
        },
        complete: function (res) {
          wx.hideLoading()
          //最重要的是这个
          i++
          if (i < filePath.length) {
            batchUploadImg(filePath, i, name, successc, failc)
          }
        },
      })
    }
  })
}
const getPolicyBase64 = function () {
  let date = new Date();
  date.setHours(date.getHours() + env.timeout);
  let srcT = date.toISOString();
  const policyText = {
    "expiration": srcT, //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了 
    "conditions": [
      ["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb
    ]
  };

  const policyBase64 = base64.encode(JSON.stringify(policyText));
  return policyBase64;
}

const getSignature = function (policyBase64) {
  const accesskey = env.AccessKeySecret;

  const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
    asBytes: true
  });
  const signature = Crypto.util.bytesToBase64(bytes);

  return signature;
}

module.exports = batchUploadImg;
-------------------------------
$是自己封装的方法
## 使用
const batchUploadImg = require('../../uploadImg/uploadImg.js');
点击上传的方法
  uploadImg() {
    let _this = this
    let name = 'file'
    let i = 0
    $.chooseImage(5 - this.data.imgUrlArr.length).then((filePath) => {
      console.log(filePath)
      batchUploadImg(filePath, i, name,
        function (result) {
          let image = _this.data.imgUrlArr;
          image.push(result)
          return (
            _this.setData({
              imgUrlArr: image,
            })
          )
        }
      )
    })
  },
  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值