<template>
<div class="hello">
<el-upload
ref="upload"
multiple
:http-request="handleUpload"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:limit="10"
:show-file-list="true"
:file-list="fileList">
<el-button
type="success"
icon="el-icon-upload"
size="mini">添加附件
</el-button>
</el-upload>
</div>
</template>
<script>
// 这里要引入COS 和 你们团队使用的Ajax库
export default {
name: 'hello',
data() {
return {
fileList: [],
cos:null
}
},
methods: {
handleRemove(file, fileList) {
this.researchForm.fileList = fileList;
console.log(this.researchForm.fileList);
},
handleExceed() {
this.$message.warning({
message: '不能超过10个附件'
})
},
handleUpload(param) {
const self = this;
let file = param.file;
if (!file) return;
let originName = file.name;
let originSize = file.size;
let originType = file.type;
uAxios.get('/api/qcloud/secret').then(res => {
let result = res.data.data;
self.cos = new COS({
getAuthorization: function (options, callback) {
callback({
TmpSecretId: result.tmp_secret_id,
TmpSecretKey: result.tmp_secret_key,
XCosSecurityToken: result.xcos_security_token,
ExpiredTime: result.expired_time,
});
}
});
let bucket = result.bucket;
let region = result.region;
let upload_dir = result.dir;
self.cos.putObject({
Bucket: bucket,
Region: region,
Key: result.dir + file.name,
Body: file
}, function (err, data) {
console.log(err || data);
if (err) {
self.$message.error({
message: err.error
});
} else {
let file_path = 'https://' + bucket + '.cos.' + region + '.myqcloud.com/' + upload_dir + file.name;
console.log('文件上传成功 ' + file_path);// 得到的file_path 就是上传到腾讯云的路径,将这个URL传给后端即可
}
});
});
},
}
}
</script>
网友评论