用ajax上传图片到oss

最新推荐文章于 2021-08-05 17:47:33 发布

背面兄弟

最新推荐文章于 2021-08-05 17:47:33 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/a984145377/article/details/84594553

本文介绍使用JavaScript和微信小程序实现阿里云OSS文件上传的方法，包括生成上传策略、签名和利用FormData进行文件上传的过程。

        var request = new FormData()
        request.append("OSSAccessKeyId",'xxxxxxxxxxxxxxxx');
        request.append("policy",policy);
        request.append("Signature",signature);
        var name = self.Oss.UUID()+this.files[0].name
        request.append("key",name);
        request.append("success_action_status",'200');
        request.append('file', this.files[0]);
        $.ajax({
          url:url,
          processData: false,
          cache: false,
          async: false,
          contentType: false,
      　　 type: 'post',
          data:request,
          success:function(request){
            $(self.Oss.sendArray[i]).val(url+'/'+name) 
          }
        })

接口拿的数据：

   const host = `http://${config.bucket}.${config.region}.aliyuncs.com`
   const expireTime = new Date().getTime() + config.expAfter
   const expiration = new Date(expireTime).toISOString()
   const policyString = JSON.stringify({
      expiration,
      conditions: [
        ['content-length-range', 0, config.maxSize]
      ]
    })
   const policy = Buffer.from(policyString).toString('base64')
   const signature = crypto.createHmac('sha1', 
   config.accessKeySecret).update(policy).digest("base64")

config.accessKeySecret、config.region、config.bucket：阿里云拿的

-----------------------------------------------------下面是小程序的-------------------------

1.通过chooseImage选择照片，返回的是一个地址数组。

2.然后通过uploadFile上传到阿里云


import ajax from '@U/ajax'
var ossParam = {
  count: 6,
  url: "/oss/sign",
  index: 0,
  imgTempUrl: [],
  _cbImgs:[]
}
export default{
  newGuid(){
    let guid = ''
    for (let i = 1; i <= 32; i++) {
      let n = Math.floor(Math.random()*16.0).toString(16)
      guid += n
      if ((i==8) || (i==12) || (i==16) || (i==20)) {
        guid += "-"
      }
    }
    return guid
  },
  // 选择图片
  chooseImg(sourceType, chooseCb){
    var self = this
    wx.chooseImage({
      count: 6,
      sourceType: sourceType,
      success: (res)=>{
        wx.showLoading({
          title: "加载中",
          mask: true
        })
        ossParam.imgTempUrl = res.tempFiles
        ossParam.count = res.tempFiles.length
        self._upload(chooseCb)     
      }
    })
  },
  _upload(cb){
    if(ossParam.index < ossParam.count){
      //继续上传
      let filePath = ossParam.imgTempUrl[ossParam.index].path
      this.uploadImage(filePath,cb)      
    }else{
      //返回结果
      cb && cb(ossParam._cbImgs)
      return
    }
  },
  uploadImage(filePath,cb){
    let self = this;
    ajax.get(ossParam.url, {
      success:function(ossRes) {
        var key = self.newGuid();
         wx.uploadFile({
          url: ossRes.data.host,
          filePath: filePath,
          name: 'file',
          formData: {
            name: "123",
            key: key,
            policy: ossRes.data.policy,
            OSSAccessKeyId: ossRes.data.OSSAccessKeyId,
            success_action_status: '200',
            signature: ossRes.data.signature
          },
          success: result => {
            if (result.statusCode === 200) {
              let _tempUrl = `${ossRes.data.host}/${key}`
              ossParam._cbImgs.push(_tempUrl);
              ossParam.index ++ ;
              self._upload(cb)
            } 
          },
          fail: err => {
            failCb && failCb()                               
          }
        })
      },
      fail:()=>{
        wx.hideLoading();
        console.log("err: "+ err)
      }
    })
  }
}