axios直接上传binary

大风起兮云飞扬丶

已于 2024-12-03 10:37:43 修改

阅读量739

点赞数 1

分类专栏： JavaScript 文章标签：前端

于 2024-10-23 16:29:07 首次发布

本文链接：https://blog.csdn.net/weixin_45932565/article/details/143187422

版权

JavaScript 专栏收录该内容

35 篇文章

订阅专栏

axios直接上传二进制文件、 axios直接上传apk、axios直接上传binary

postman中的参数选项中有个binary，平常我们很少使用，可能有的同学遇到这种情况不太会了，认为后端应该有个字段名来接收，或者使用 Formdata，但其实是可以直接把文件给传过去的。

操作

如果上传apk，需设置Content-Type，如果是直接使用 XMLHttpreques发请求，可以不用设置

	"Content-Type": "application/vnd.android.package-archive"

直接将 file 放进去，不需要字段名接收

    upload(file) {
      return new Promise((resolve, reject) => {
        axios.put(url, file, {
            headers: {
              "Content-Type": "application/vnd.android.package-archive",
            },
            onUploadProgress: (progressEvent) => {
              const { loaded, total } = progressEvent;
              const percent = Math.round((loaded * 100) / total);
              console.log('当前进度>>',percent)
            },
          })
          .then(resolve)
          .catch((e) => {
            reject(e);
          });
      });
    }

浏览器下载文件

问题

为什么在浏览器里直接输入下载链接，浏览器可以下载文件，而在代码中用ajax请求却不能直接触发下载？

解答

因为下载是浏览器的内置事件，浏览器的GET请求（frame、a）、POST请求（form）的response会交由浏览器处理
ajax的response是交由JavaScript处理，因此ajax本身无法触发浏览器的下载功能。

做法

在前端使用axios进行GET请求，设置 responseType 为 blob，然后通过Blob构造函数创建一个新的Blob对象。

axios({
    url: 'xxx',
    method: "get",
    params,
    responseType:'blob'
  }).then(res=> {
     const blob = new Blob([res.data], {
       type: "application/vnd.ms-excel", // xlsx
     });
     
     let link = document.createElement("a");
     link.href = URL.createObjectURL(blob);
     link.setAttribute("download",`fileName.xlsx`);
     link.click();
     link = null;
  })