前端配合后端 采用临时上传 相关参考文档
使用临时URL进行授权访问_对象存储服务 OBS_BrowserJS_临时授权访问_华为云
选择文件方法 【 isPay 是否上传完毕】
handleChange(file, fileList) {
this.active = 0;
this.json_data = [];
console.log(file, fileList);
fileList.forEach((item) => {
item.client = null;
item.isPlay = false;
item.isLoading = false;
item.abortCheckpoint = false;
});
this.fileList = fileList;
this.file = file.raw;
this.uploadDisabled = false;
this.pauseDisabled = this.resumeDisabled = true;
}
文件上传函数
async submitForm() {
if (!this.file) {
this.$message.error("请选择文件");
return;
}
this.fileList.forEach(async (item,) => {
item.isLoading = true;
let formData = new FormData();
formData.append("file", item.raw);
const json_data = formData.get('file');
await this.getUploadUrl(item, json_data)
item.isLoading = false;
});
}
获取文件上传的路径 【后端接口】
// 获取上传临时路径
async getUploadUrl(item, json_data) {
const targetObj = {
"objectKey": item.name,
"contentType": item.raw.type
}
await getLink({
...targetObj})
.then(res => {
console.log(res.data, 'res')
const {
actualSignedRequestHeaders, signedUrl} = res.data;
this.action = signedUrl;
this.actualSignedRequestHeaders = actualSignedRequestHeaders
this.sendRequest(item, json_data)
})
},
返回的接口内容为
{
"actualSignedRequestHeaders":{
"Host":"XXXXXXXX.obs.cn-north-9.myhuaweicloud.com:443",
"Content-Type":"text/plain"
},
"signedUrl":"https://XXXXXXXX.obs.cn-north-9.myhuaweicloud.com:443/?AccessKeyId=CBTB9PUIERYBKGWDDESF&Expires=1706249028&Signature=Q20YrJkCFamPI6L1uKrvVakQMjA%3D"
}
上传文件并获取文件地址
【这里需要注意的点是 axios 的请求头】
【不要把host写在header里面，不然会出现 Refused to set unsafe header "Host" 问题】
【会和 w3c 中的规范有冲突—— w3c 中的规范】
// 请求上传数据
async sendRequest(item, json_data) {
var method = 'PUT';
var reopt = {
method: method,
url: this.action,
withCredentials: false,
headers: {
"Content-Type": this.actualSignedRequestHeaders[
"Content-Type"
]
} || {
},
validateStatus: function (status) {
return status >= 200;
},
maxRedirects: 0,
responseType: 'text',
data: json_data,
// 进度条
onUploadProgress: (progressEvent) => {
console.log(progressEvent, 'progressEvents')
if (progressEvent.lengthComputable) {
item.percentage = progressEvent.loaded / progressEvent.total * 100;
}
}
};
console.log(reopt, 'action')
uploadFile({
...reopt
}).then(async (res) => {
// 这里没有返回结果
// 生成excel 文件
const sendObj = {
name: item.name,
url: `https: //${
this.actualSignedRequestHeaders.Host}/${
item.name}`,
};
this.json_data.push(sendObj);
let newJSON = JSON.stringify(this.json_data);
let SCnewJSON = Utils.encrypt(newJSON);
// 异步操作
window.localStorage.setItem(`woData`, SCnewJSON);
this.fileNames = `${
this.getToday()
}.xls`;
this.active = 1;
})
},
