华为云OBS-文件上传

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

使用临时URL进行授权访问_对象存储服务 OBS_BrowserJS_临时授权访问_华为云

选择文件方法 【 isPay 是否上传完毕】

javascript 复制代码
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;
}

文件上传函数

javascript 复制代码
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;
    });

}

获取文件上传的路径 【后端接口】

javascript 复制代码
// 获取上传临时路径
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)
        })
},

返回的接口内容为

json 复制代码
{
    "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 中的规范

javascript 复制代码
//  请求上传数据
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;
    })
},
相关推荐
SZ17011023112 小时前
华为云 银河麒麟 vscode远程连接
ide·vscode·华为云
Just_Paranoid3 天前
华为云Flexus+DeepSeek征文|基于Dify构建音视频内容转录工作流
华为云·音视频·dify·maas·deepseek·flexusx
小明说Java3 天前
华为云Flexus+DeepSeek征文 | 基于华为云Flexus X实例部署Dify平台构建企业行政助手的可用性研究
华为云·maas·deepseek·flexus
降世神童4 天前
华为云Flexus+DeepSeek征文| 使用华为云CCE容器部署Dify-LLM高可用方案的验证与测试
运维·华为云·aigc
安 当 加 密4 天前
多云密钥统一管理实战:CKMS对接阿里云/华为云密钥服务
数据库·阿里云·华为云
降世神童4 天前
华为云Flexus+DeepSeek征文| 基于华为云Dify-LLM高可用平台开发运维故障处理智能体
运维·华为云·aigc
cooldream20094 天前
华为云Flexus+DeepSeek征文|利用华为云一键部署 Dify 平台并接入 DeepSeek 大模型,构建长篇文章生成助手
大模型·华为云·dify
Linux猿4 天前
华为云Flexus+DeepSeek征文|基于华为云Flexus云服务的Dify 快速构建联网搜索助手
华为云·华为云服务·华为云征文·联网搜索助手·华为云flexus云服务
江湖有缘4 天前
华为云Flexus+DeepSeek征文|基于 Dify-LLM 构建网站智能客服助手的实践探索
华为云
AI生存日记4 天前
AI 日报:阿里、字节等企业密集发布新技术,覆盖语音、图像与药物研发等领域
人工智能·华为云·语音识别·open ai大模型