Vue 将本地图片上传到阿里云

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、获取服务器通行证（即获取AccessKey和accessKeySecret）

getAccess () {
let that = this
let url = '服务器地址'
let params = {
type: 'K'
}
// 第一步：获取AccessKey
this.$api.send(url, params).then((response) => {
if (response.status === 200) {
that.accessKey = response.body.data.data.Credentials
/* global OSS */
that.client = new OSS.Wrapper({
region: 'oss-cn-shenzhen',
bucket: '阿里云bucket文件夹名',
accessKeyId: that.accessKey.AccessKeyId,
accessKeySecret: that.accessKey.AccessKeySecret,
stsToken: that.accessKey.SecurityToken
})
that.folder = response.body.data.data.folder;
for (let i = 0; i < that.allList.length; i++) {
if (!that.allList[i].hasUpload) {//allList 需要上传的图片数组

(function () { that.uploadItem(that.allList[i], i) })(i) } } } }) }

二、上传到服务器

uploadItem (file, index) {
let that = this
let progress = function (p) {
return function (done) {
done()
}
}
// 命名规则：web+id+10位时间戳+随机4位数
let storeAs = 'web' + that.$user.getAll().userId + Math.round(new Date().getTime() / 1000) + Math.ceil(Math.random() * 100000).toString() + '.' + file.name.split('.')[1]
// 第二步：调用阿里云上传函数上传文件
this.client.multipartUpload(this.folder + '/' + storeAs, file.obj, {
progress: progress
}).then(function (result) {
alert(上传成功)
}).catch(function (err) {
console.log(err)
})
}