前端直接上传图片到upyun(又拍云)，不走后端接口

不懂前端的小韩

已于 2023-12-27 17:06:09 修改

阅读量393

点赞数 5

分类专栏： uni-app文章文章标签：前端 uni-app vue.js

于 2023-07-13 14:26:30 首次发布

本文链接：https://blog.csdn.net/hanmeng0929/article/details/131695070

版权

uni-app文章专栏收录该内容

8 篇文章 0 订阅

订阅专栏

提示：前端直接上传图片到upyun(又拍云)服务器，不走后端接口。

文章目录

前言
一、适用的范围？
二、使用步骤
总结

前言

前端直接上传图片到upyun(又拍云)，不走后端接口。需要拿到公司upyun的服务名(bucket)，操作人(operator)，getSignatureUrl（签名接口地址）即可；

一、适用的范围？

uni-app开发的app或者微信小程序，或者uni-app开发的项目都可以使用；
其它项目应该都可以，官网都有相应的案例，需读者根据需求，自行去官网查找；
本案例介绍的是：uni-app开发的app或者微信小程序都适用！

二、使用步骤

1.安装依赖

代码如下（示例）：

1. 安装依赖：npm install upyun
2.新建一个upyun.js文件；
3.在需要图片上传的文件中引入；

2.新建一个upyun.js文件

代码如下（示例）：

function Upyun(options) {
  this.bucket = options.bucket
  this.operator = options.operator
  this.getSignatureUrl = options.getSignatureUrl
}

Upyun.prototype.upload = function (options) {
  var self = this
  if (!options.remotePath) {
    options.remotePath = options.localPath.split('//')[1]
  }
  var date = new Date().toGMTString()
  var opts = {
    'save-key': options.remotePath,
    bucket: self.bucket,
    expiration: Math.round(new Date().getTime() / 1000) + 3600,
    date: date,
  }
  var policy = Base64.encode(JSON.stringify(opts))
  var data = ['POST', '/' + self.bucket, date, policy].join('&')
  self.getSignature(data, function (err, signature) {
    if (err) {
      options.fail && options.fail(err)
      options.complete && options.complete(err)
      return
    }
    uni.uploadFile({
      //这里的url不用修改，不可以修改；直接用即可，这是官网的接收地址，不要修改；
      url: `https://v0.api.upyun.com/${self.bucket}`,
      filePath: options.localPath,
      name: 'file',
      formData: {
        // 1.这个authorization和policy是根据签名接口地址getSignatureUrl生成的，这个地址是后台开的，如果没有这个地址（比如我们就没有这个地址），可以在upyun网址上输入服务名，密码，过期时间等自动获取；如果有签名地址，就把下面这两行代码放开，让它自动计算authorization和policy；要是没有，就跟下面这样写死；获取的位数不用管，有的长，有的短，正常现象；
        // authorization: `UPYUN ${self.operator}:${signature}`,
        // policy: policy
        authorization: 'UPYUN fxxxxxxtao:jNyxIN6TybuvXhyf343Vhxxxxxx=',
        policy: 'eyJidWNrZXQiOiJ5aXFpdG9nZXRoZXIiLCJzYXZlLWtleSI6Ii95eXFjL3t5ZWFyfXttb259e2RheX0vdXBsb2FkX3tyYW5kb20zMn17LnN1ZmZpeH0iLCJleHBpcmF0xxxxxxxxxxxxxxx==',
      },
      success: options.success,
      fail: options.fail,
      complete: options.complete,
    })
  })
}

Upyun.prototype.getSignature = function (data, cb) {
  wx.request({
    url: this.getSignatureUrl,
    data: {
      data: data,
    },
    success: function (res) {
      cb(null, res.data.signature)
    },
    fail: function (err) {
      cb(err)
    },
  })
}

/* eslint-disable */
var Base64 = {
  // private property
  // _keyStr不要修改，不用动，就这样写
  _keyStr: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
  // public method for encoding
  encode: function (input) {
    var output = ''
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4
    var i = 0
    input = Base64._utf8_encode(input)
    while (i < input.length) {
      chr1 = input.charCodeAt(i++)
      chr2 = input.charCodeAt(i++)
      chr3 = input.charCodeAt(i++)
      enc1 = chr1 >> 2
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4)
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6)
      enc4 = chr3 & 63
      if (isNaN(chr2)) {
        enc3 = enc4 = 64
      } else if (isNaN(chr3)) {
        enc4 = 64
      }
      output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4)
    }
    return output
  },
  // public method for decoding
  decode: function (input) {
    var output = ''
    var chr1, chr2, chr3
    var enc1, enc2, enc3, enc4
    var i = 0
    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, '')
    while (i < input.length) {
      enc1 = this._keyStr.indexOf(input.charAt(i++))
      enc2 = this._keyStr.indexOf(input.charAt(i++))
      enc3 = this._keyStr.indexOf(input.charAt(i++))
      enc4 = this._keyStr.indexOf(input.charAt(i++))
      chr1 = (enc1 << 2) | (enc2 >> 4)
      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2)
      chr3 = ((enc3 & 3) << 6) | enc4
      output = output + String.fromCharCode(chr1)
      if (enc3 != 64) {
        output = output + String.fromCharCode(chr2)
      }
      if (enc4 != 64) {
        output = output + String.fromCharCode(chr3)
      }
    }
    output = Base64._utf8_decode(output)
    return output
  },
  // private method for UTF-8 encoding
  _utf8_encode: function (string) {
    string = string.replace(/\r\n/g, '\n')
    var utftext = ''
    for (var n = 0; n < string.length; n++) {
      var c = string.charCodeAt(n)
      if (c < 128) {
        utftext += String.fromCharCode(c)
      } else if (c > 127 && c < 2048) {
        utftext += String.fromCharCode((c >> 6) | 192)
        utftext += String.fromCharCode((c & 63) | 128)
      } else {
        utftext += String.fromCharCode((c >> 12) | 224)
        utftext += String.fromCharCode(((c >> 6) & 63) | 128)
        utftext += String.fromCharCode((c & 63) | 128)
      }
    }
    return utftext
  },
  // private method for UTF-8 decoding
  _utf8_decode: function (utftext) {
    var string = ''
    var i = 0
    var c = (c1 = c2 = 0)
    while (i < utftext.length) {
      c = utftext.charCodeAt(i)
      if (c < 128) {
        string += String.fromCharCode(c)
        i++
      } else if (c > 191 && c < 224) {
        c2 = utftext.charCodeAt(i + 1)
        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63))
        i += 2
      } else {
        c2 = utftext.charCodeAt(i + 1)
        c3 = utftext.charCodeAt(i + 2)
        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63))
        i += 3
      }
    }
    return string
  },
}
/* eslint-enable */
// 只需替换掉服务名（bucket）和操作人（operator）即可；
const upyun = new Upyun({
  bucket: 'xxxxxtogether',
  operator: 'xxxxx',
  //签名接口地址
  getSignatureUrl: 'http://img.multshows.com',
})
export { upyun }

1.在upyun网站获取authorization和policy（在线获取地址：https://www.yuque.com/u160746/fk96qt/dtxsm9），里面有个在线签名工具，点进去即可看到下面这张图

在这里插入图片描述

只需替换掉服务名（bucket）和操作人（operator）即可，其它的地方就是那个authorization和policy需要根据是否有签名接口地址（getSignatureUrl）来判断是否修改上传的那块（上面已经解释过了）。

3.在上传图片的地方使用

第一种：uni.chooseImage上传图片时

 
 // 修改头像
    editAvatar() {
      let that = this
      uni.chooseImage({
        count: 1,
        // 裁剪照片
        crop: {
          quality: 80,
          width: 350,
          height: 350,
        },
        sourceType: ['album', 'camera'], //从相册选择
        success: (res) => {
          const imageSrc = res.tempFilePaths[0]
          upyun.upload({
            localPath: imageSrc,
            remotePath: '/yxxyqc/{year}{mon}{day}/upload_{random32}{.suffix}', //上传文件保存路径
            success: function (res) {
              console.log('uploadImage success, res is:', res)
              console.log(JSON.parse(res.data), '3000')
              if (res.statusCode == 200) {
                let avatarInfo = JSON.parse(res.data).url
                that.avatar = 'http://img.xxxxxxxx.com' + avatarInfo
              }
            },
            fail: function ({ errMsg }) {
              console.log('uploadImage fail, errMsg is111111', errMsg)
            },
          })
        },
      })
    },

第二种：使用组件u-upload上传图片

<u-upload
      @afterRead="afterRead"
      @delete="deletePic"
      name="1"
      multiple
      :maxCount="9"
      width="210"
      height="210"
      uploadIcon="plus"
      :previewFullImage="true">
</u-upload>


methods: {
    // 新增图片
    async afterRead(event) {
      let that = this
      let lists = event.file
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
        })
      })
      let imgList5 = []
      this.fileList1.forEach((item) => {
        upyun.upload({
          localPath: item.url,
          remotePath: '/yxxyqc/{year}{mon}{day}/upload_{random32}{.suffix}', //上传文件保存路径
          success: function (res) {
            console.log(JSON.parse(res.data), '3000')
            if (res.statusCode == 200) {
              let imgList = JSON.parse(res.data).url
              // http://img.xxxxxx.com替换成你们公司upyun接收地址即可;
              that.imgList2 = 'http://img.xxxxxx.com' + imgList
              imgList5.push(that.imgList2)
            }
          },
          fail: function ({ errMsg }) {
            console.log('uploadImage fail, errMsg is', errMsg)
          },
        })
      })
      that.imgList4 = imgList5
      //that.imgList4就是获取的所有图片地址数组
    },
 }