V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
yazoox
V2EX  ›  JavaScript

请教下,通过 fetch/axios 从网上 GET 到的文件, response.data 是 ArrayBuffer 还是 Blob,怎么转换呀?

  •  
  •   yazoox · 2022-03-06 22:26:24 +08:00 · 2260 次点击
    这是一个创建于 1004 天前的主题,其中的信息可能已经有所发展或是发生改变。

    弄了半天,转换来转换去,就是转换不对,没有弄明白。

    比如:

    export async function downloadPikachu(): Promise<Blob | undefined> {
      const options: AxiosRequestConfig = {
        method: "GET",
        // url: "https://static.wikia.nocookie.net/villainstournament/images/8/89/Pikachu.jpg/revision/latest?cb=20190528172002",
        url: "https://static.wikia.nocookie.net/villainstournament/images/8/89/Pikachu.jpg",
        headers: {}
      };
    
      try {
        const res = await axios(options);
        if (res.status === 200) {
          console.log(res);
    
          // TODO:
          // const arrBuffer = res.data as ArrayBuffer;
          // const int8Array = Array.from(new Uint8Array(arrBuffer));
          // const blob = new Blob([arrBuffer], { type: "application/octet-stream" });
          // const blob = new Blob([new Uint8Array(int8Array)]);
          // return blob;
        }
        return undefined;
      } catch (error) {
        console.log(error);
        return undefined;
      }
    }
    

    p.s. 需要 Blob ,是因为后面还要用(这样 chrome 就能够根据 blob 下载文件了,相当于 save as 成一个文件)

          const urlFile = window.URL.createObjectURL(blobData);
          const a = document.createElement("a");
          document.body.appendChild(a);
          a.href = urlFile;
          a.download = fileName;
          a.click();
          window.URL.revokeObjectURL(urlFile);
          a.remove();
    
    6 条回复    2022-03-07 08:45:01 +08:00
    FaiChou
        1
    FaiChou  
       2022-03-06 22:32:40 +08:00
    if (res.status === 200) { return res.blob(); }

    http://danml.com/download.html
    moen
        2
    moen  
       2022-03-06 22:32:57 +08:00
    fetch 直接调用 Response.blob(),而 axios 要在 Request Config 设置 responseType 为 blob
    yazoox
        3
    yazoox  
    OP
       2022-03-06 23:06:10 +08:00
    @moen 试过了,不行呢。
    axios 设置了 headers: { responseType: "blob" } 没有用呢。取回来的结果 res.data ,和不添加这个 header 是一样的。
    而且,window.URL.createObjectURL(blobData); 会出错,
    “Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.”
    Puteulanus
        4
    Puteulanus  
       2022-03-07 00:20:52 +08:00
    @yazoox responseType 不是放在 headers 里的,跟 method 那些放在同一层

    createObjectURL 和下面那一堆可以看看 https://github.com/eligrey/FileSaver.js
    Juszoe
        5
    Juszoe  
       2022-03-07 00:28:09 +08:00
    ```
    const r = await axios.get(url, {
    responseType: "blob",
    });
    const urlFile = window.URL.createObjectURL(new Blob([r.data]));
    const a = document.createElement("a");
    a.href = urlFile;
    a.download = fileName;
    document.body.appendChild(a);
    link.click();
    ```
    我这段代码运行正常,responseType 不是在 headers 里设置哦
    yazoox
        6
    yazoox  
    OP
       2022-03-07 08:45:01 +08:00
    @Puteulanus
    @Juszoe
    ...... 果然,真是好低级的错误
    谢谢!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3903 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 04:14 · PVG 12:14 · LAX 20:14 · JFK 23:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.