1.引入阿里云
import OSS from 'ali-oss'
2.利用input的file属性选择上传的文件
const file = e.target.files[0]
e.target.value = ''
注:选择文件时使用accept属性会导致一部分手机无法正常的上传文件,可以使用file.type判断文件的类型
3.调取后端接口,获取上传阿里云的参数
ossParams().then(res => {
const client = new OSS.Wrapper({
accessKeyId: res.data.accessKeyId,
accessKeySecret: res.data.accessKeySecret,
bucket: res.data.bucket,
endpoint: res.data.endpoint,
region: res.data.region,
secure: true
})
4.随机定义文件的名称
let randomName = that.random_string()
random_string (len) { //定义在上传文件之外的方法
len = len || 32
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
var maxPos = chars.length
var pwd = ''
for (let i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos))
}
return pwd
}
5.设置上传的进度
const progress = function (p) {
return function (done) {
that.percentage = Math.floor(p * 100)
done()
}
}
6.开始进行上传(放在阿里云的abc文件夹下)
client.multipartUpload('abc/' + randomName, file, { progress: progress }).then(function (result) {
// console.log(result)
that.vedioUrl = result.res.requestUrls[0].split('?uploadId=')[0]
that.$message({
message: '上传成功',
type: 'success'
})
}).catch(() => {
that.$message({
message: '上传失败',
type: 'error'
})
})