Question

我有一个React Client，它将用户输入作为文件接收，并将其发送到我的远程Flask服务器进行存储。我以Werkzeug FileStorage对象的形式发送文件，并在远程服务器中将它与file.save（path）存储在一起。在React Client中，我试图建立一种从服务器下载文件的方法，但是我遇到了问题。目前，我的程序正在下载.txt文件。我可以通过获取javascript请求来做到这一点：

 fetch(FETCH_URL, {
  method: 'POST',
  body: data,
  headers: {
    'Content-Type': 'application/json'
  }
}).then((response) => {
    var a = response.body.getReader();
    a.read().then(({ done, value }) => {
        saveAsFile(new TextDecoder("utf-8").decode(value), 'filename.txt');
      }
    );
});


function saveAsFile(text, filename) {
  const type = 'application/text'; // modify or get it from response
  const blob = new Blob([text], {type});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click(); 
}

感谢我在这篇文章中获得的帮助：Download file in react client from flask remote server

我知道此代码是专门根据传递给Blob的类型而仅适用于.txt文件的，但前端并不是真正的问题。

真正的问题是在我的远程烧瓶服务器中，以下代码在烧瓶服务器中被称为：

 with open(filename, 'r') as f:
     contents = f.read()
     return contents

我尝试返回文件本身，但服务器给出错误：

"ValueError: I/O operation on closed file."

所以我决定返回文件内容，如上所示。

当我尝试获取文件“ download.jpeg”时出现问题。读取文件会出现以下错误：

"UnicodeDecodeError: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte"

据我了解，Flask仅适用于'utf-8'，并且我认为这意味着服务器中的文件采用'utf-8'编码。

有人对解决方案或解决方法有任何建议或指导，或者是一种将文件保存在服务器上时更改文件编码的方法，或者其他可以帮助我解决问题的方法吗？

Answer 1

Fetch的Response具有blob()可以将响应直接转换为blob，因此您不必读取流，也不必找出其内容类型或其他任何内容。只需尝试以下解决方案即可。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>A2Q4</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <center>
    <br>
    <form name="myForm">
      <h1>Text detector<br/>A program created by Mohanad Arafe</h1>
      <input type="text" name="amount" placeholder="Enter your sentence" />
      <input type="button" onclick="NumberStats(amount.value)" value="Try it">
      <p id="p1"></p>
    </form>
</body>

</html>

处理Flask文件上载/下载中的编码

1 个答案: