阿里云存储配置跨域需要把PUT跨域配置一下
暴露Headers
ETag
x-oss-request-id
Vue 前端上传文件到阿里云存储代码:
1. 需要先安装阿里云的上传库:
npm install ali-oss
有的可能提示需要安装ajv@^6.9.1,也安装一下
2. 配置部分代码:
data() {
return {
shop_name: '',
fileList: [],
tempUrl: '', //存上传后的图片url
dataObj: {
region: 'oss-cn-beijing',//我的存储是北京,可根据具体配置自行修改
accessKeyId: '',
accessKeySecret: '',
bucket: '',
}, //存签名信息
baseAli:'oss-cn-beijing.aliyuncs.com',/我的存储是北京,可根据具体配置自行修改
progress: 0//进度条
}
},
3. 上传部分代码:
afterRead(file) {
// 此时可以自行将文件上传至服务器
//console.log(file);
const that = this;
//判断扩展名
const tmpcnt = file.file.name.lastIndexOf(".");
const exname = file.file.name.substring(tmpcnt + 1);
const names = ['jpg', 'jpeg', 'webp', 'png', 'bmp'];
if (names.indexOf(exname) < 0) {
this.$message.error("不支持的格式!");
return
}
let client = new OSS(this.dataObj);
async function multipartUpload() {
const fileName = file.file.name;
//定义唯一的文件名,打印出来的uid其实就是时间戳
//client 是第一步中的 client
client.multipartUpload(fileName, file.file,
{
progress: function (p) { //获取进度条的值
console.log(p);
that.progress = p * 100
},
}).then(
result => {
//下面是如果对返回结果再进行处理,根据项目需要
// console.log(result)
that.tempUrl = 'http://' + result.bucket + '.' + that.baseAli + '/' + result.name
console.log(that.tempUrl);
}).catch(err => {
console.log("err:", err)
})
}
multipartUpload();
},