前端配合后端 采用临时上传 相关参考文档

使用临时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 = actualSignedRequestHeadersthis.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;})
},