开发者社区> 问答> 正文

在 vue 项目中使用 axios 将文件上传到 oss 一直报错要怎么解决?

在 vue 项目中使用 axios 将文件上传到 oss 报错。

我写的具体文件上传代码如下:
image.png
具体结果:
image.png
报错信息:
image.png
使用网上下载的 oss-h5-upload-js-direct:
image.png
上传结果
image.png
上传的数都是一样的,但我用 axios 写的文件上传就是报跨域的错误。(oss-h5-upload-js-direct 也是本地上传,oss 管理端没有显示跨域)

展开
收起
OSC开源社区 2024-06-05 18:59:27 19 0
1 条回答
写回答
取消 提交回答
  • 直接使用 XMLHttpRequest 完成oss图片上传。(具体代码如下:)

    const importFile = async (event: any) => {
    const file = event.target.files[0];
    defaultPercent.value = 0;
    let formData = new FormData();
    uploadText.value = file.name;
    let classType = file.name.substring(file.name.lastIndexOf(".") + 1);
    formData.append("name", file.name);
    formData.append("key", file.name);
    formData.append("policy", policy);
    formData.append("OSSAccessKeyId", OSSAccessKeyId);
    formData.append("success_action_status", "200");
    formData.append("signature", signature);
    formData.append("file", file);
    let xhr = new XMLHttpRequest();
    xhr.upload.onprogress = function (e) {
    if (e.lengthComputable) {
    // 获取百分制的进度
    defaultPercent.value = Math.round(e.loaded / e.total * 100);
    }
    }
    xhr.open("post", ossUrl, true)
    xhr.send(formData);
    xhr.onreadystatechange = function () { //绑定响应状态事件监听函数
    if (xhr.readyState == 4) { //监听readyState状态
    if (xhr.status == 200 || xhr.status == 0) { //监听HTTP状态码
    emit("uploadData", { classType, url: ossUrl + "/" + file.name });
    }
    }
    }
    }

    2024-06-13 15:14:13
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
OSS运维进阶实战手册 立即下载
《OSS运维基础实战手册》 立即下载
OSS运维基础实战手册 立即下载