vue 上传文件到华为云obs

最新推荐文章于 2025-01-02 08:00:00 发布

Lora_0925

最新推荐文章于 2025-01-02 08:00:00 发布

阅读量2.5k

点赞数 1

分类专栏： vue2 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Lora_0925/article/details/117126931

版权

vue2 专栏收录该内容

28 篇文章

订阅专栏

这篇博客详细介绍了如何在前端环境中利用OBSBrowserJSSDK和axios库来上传图片、视频和音频文件到华为云的对象存储服务（OBS）。首先，你需要下载并引入OBSBrowserJSSDK的开发包，然后配置axios以发起PUT请求进行文件上传。在示例代码中，展示了如何设置请求头、验证状态和响应类型，以实现文件上传。当响应状态小于300时，表示上传成功；否则，打印失败信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

上传图片、视频、音频文件到华为云obs（由后端创建桶），前端只需上传即可

环境：

1.下载OBS BrowserJS SDK开发包点击跳转，引入esdk-obs-browserjs-without-polyfill-3.19.5.min.js文件

2.引入axios

3.上传

// 发起PUT请求
    putSend(url, formData) {
      // put请求
      // 传入一个参数对象即可得到基于该参数对象的文本内容
      var reopt = {
        method: "put",
        url: url,
        withCredentials: false,
        headers:
          {
            "Content-Type": "text/plain",
          } || {},
        validateStatus: function (status) {
          return status >= 200;
        },
        maxRedirects: 0,
        responseType: "text",
        data: formData,
      };
      axios
        .request(reopt)
        .then((response) => {
          if (response.status < 300) {
            console.log("succeed");
          } else {
            console.log("failed!");
          }
          // console.log(response);
        })
        .catch(function (err) {
          console.log(err);
        });
    },