时间戳

首页 > 解决方案 > 尝试上传传递名称的 txt 文件时出现反应错误

javascript - 尝试上传传递名称的 txt 文件时出现反应错误

问题描述

我有一个加载 txt 文件的组件，然后我尝试上传该 txt 文件，并在请求中传递名称，我得到的文件是这样的：

const fetch = ({ target }) => {
    const reader = new FileReader();
    const file = target.files[0];
    if (file) {
      reader.readAsText(file);
      reader.onloadend = e => {
        setFileContents(e.target.result);
      };
    }
  };

我正在尝试像这样上传它：

const URL = 'myURL';
                const formData = new FormData();
                formData.append('file', fileContents);
                fetch(URL, {
                  method: 'PATCH',
                  headers: // ... my headers,
                  body: formData
                })
                  .then(response => response.json())
                  .then(data => {
                    // success
                  })
                  .catch(() => {
                    // error
                  });

这种方法有效，但根据这 formData.append(name, value, filename);是允许的，但如果我这样做：

 formData.append('file', fileContents, 'myFile');

浏览器的控制台喊道：

未捕获的类型错误：无法在“FormData”上执行“追加”：参数 2 不是“Blob”类型

我怎样才能克服这个？我在这里想念什么？

标签： javascriptreactjsuploadfetch

解决方案

我做了更多的谷歌，我发布了这个解决方案，希望任何人都可以使用它：

由于fileContents是一个字符串，因此我需要将其转换为文件，因此我这样做了：

const myBlob = new Blob([fileContents], { type: 'text/plain' });
const myFile = new File([myBlob], { type: 'text/plain' });

然后

formData.append('file', myFile, 'myFile');

奇迹般有效。所以，如果有更好的方法可以做到这一点，请告诉我。

推荐阅读