Javascript 通过axios和firebase获取JS文件（）

我正在尝试使用Axios从Firebase获取上传的照片，并将其转换为文件对象。我将这张照片上传到我应用程序的另一部分，并在注册中保存了一个url。现在，我正在尝试使用url从存储器中获取文件。问题是，它必须是一个文件对象。我知道如何使用url仅显示图像，但这不是目标

这是我的要求：

fileFromURL(url, filename) {
  const imageFile = new File([''], 'filename');
  const config = {
    headers: {
      'Content-Type': imageFile.type,
    },
  };
  this.$axios.get(url, config)
    .then((response) => {
      // Here I am trying to transform the response to an File() object.

      const byteString = btoa(response.data);
      const ab = new ArrayBuffer(byteString.length);
      const ia = new Uint8Array(ab);
      for (let i = 0; i < byteString.length; i += 1) {
        ia[i] = byteString.charCodeAt(i);
      }
      const blob = new Blob([ia], { type: 'image/jpeg' });
      const file = new File([blob], filename);
    })
    .catch(() => {
      this.$q.notify({
        color: 'negative',
        position: 'top',
        message: 'Loading failed',
        icon: 'report_problem',
      });
    });
},

这是回应的一部分：

{data: "�PNG
↵↵
IHDR�x�� IDATx���w�%E�…���������������������������� �(�%�5IIEND�B`�", status: 200, statusText: "", headers: {…}, config: {…}, …}
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data: "�PNG
↵↵
IHDR�x�� IDATx���w�%E�"
headers: {date: "Mon, 04 Mar 2019 16:43:31 GMT", x-guploader-uploadid: "AEnB2UqVnwrANAK9hLdD6vQZA_HAIIzgmMz1EA5foN16jLnfuBcNSB0TIFr4C59I3cA4CRhnN2UloR5tdBK4UQ5IDihbpelJRQ", content-length: "16965", last-modified: "Wed, 27 Feb 2019 17:27:32 GMT", server: "UploadServer", …}
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: ""
__proto__: Object

正如您所看到的，数据由长字符串16246个字符填充

---

那么，如何将其更改为文件对象呢？

您可以配置axios以直接以Blob形式返回响应，这样您就不必自己使用以下方法进行转换：

响应类型：“blob”

演示：

---

那么目标是什么？目标是让我可以将一个文件对象输入到一个只接受文件对象的插件中。是的，这就是解决方案。非常感谢。

{data: "�PNG
↵↵
IHDR�x�� IDATx���w�%E�…���������������������������� �(�%�5IIEND�B`�", status: 200, statusText: "", headers: {…}, config: {…}, …}
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data: "�PNG
↵↵
IHDR�x�� IDATx���w�%E�"
headers: {date: "Mon, 04 Mar 2019 16:43:31 GMT", x-guploader-uploadid: "AEnB2UqVnwrANAK9hLdD6vQZA_HAIIzgmMz1EA5foN16jLnfuBcNSB0TIFr4C59I3cA4CRhnN2UloR5tdBK4UQ5IDihbpelJRQ", content-length: "16965", last-modified: "Wed, 27 Feb 2019 17:27:32 GMT", server: "UploadServer", …}
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: ""
__proto__: Object

fileFromURL(url, filename) {
  // *removed quotes from filename, typo I guess?
  const imageFile = new File([''], filename);
  const config = {
    // *removed headers as we don't know the file type anyway, I guess?
    responseType: 'blob'
  };
  this.$axios.get(url, config)
    .then((response) => {
      const file = new File([response.data], filename);
  });
}