提示:前端直接上传图片到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就是获取的所有图片地址数组
},
}
4.上传成功截图
总结
只需替换部分数据即可,上面upyun.js文件,其它的部分不需要动;如果不是uni-app或者微信小程序,可以参考upyun官网其它sdk的做法;