华为云OBS-文件上传

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

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