文件的上傳與下載實現（react、express，create-react-app腳手架）

項目結構爲先後端分離，中間布了一層node。

文件上傳

要求：將文件信息等發送到後臺。

html代碼

<input type="file" name="file">

客戶端上傳文件時的信息處理

能夠使用FormData來異步上傳一個二進制文件。上傳文件時，

1. 使用form表單上傳的，則須要設置表單的 enctype 等於 multipart/form-data，由於該值默認值爲application/x-www-form-urlencoded.
2. 使用axios庫上傳，需設置Content-Type爲multipart/form-data。
3. 使用fetch上傳，無需設置Content-Type。

const file = document.querySelector('[type=file]');
const formData = new FormData();
formData.append("file", file.files[0]);
formData.append("userName", "admin");
axios
  .post("/api/list/upload", formData, {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  })
  .then(() => {
    console.log("上傳成功");
  });

成功發送數據的樣子

FormData若需傳輸數組之類的，根據後臺所使用的語言和框架選擇，例如後臺用的是PHP，能夠這樣寫：

fileList.forEach((file) => {
   formData.append('files[]', file);
});

文件下載

html代碼

<a href="/download/templete" download>模板下載</a>

node端處理

由於項目中使用了express，因此能夠直接經過res.download方法來下載文件。
在server.js文件裏面添加

//下載文件
const path = require("path");
app.use("/download/", function(req, res) {
  const filepath = path.join(__dirname, req.url + ".xlsx"); // 文件存儲的路徑
  res.download(filepath);
});

文件結構爲

問題

由於是使用create-react-app搭建的，在本地開發環境測試下載文件的狀況時，老是沒法找到正確路徑進行下載。後來在create-react-app說明頁面的Proxying API Requests in Development模塊找到這樣一段話。

This way, when you fetch('/api/todos') in development, the development server will recognize that it’s not a static asset, and will proxy your request to http://localhost:4000/api/todos as a fallback. The development server will only attempt to send requests without text/html in its Accept header to the proxy.

大概意思就是，在開發時請求fetch('/api/todos'),開發服務器意識到它不是靜態資產，因此會將請求進行代理。開發服務器只會將Accept頭中沒有text / html的請求進行代理。

因此在本地開發環境下測試下載文件時，老是不能找到文件的正確路徑進行下載。

解決

方法一

開發測試時直接將href寫成完整的請求路徑。固然，測試完成後，仍是要將「http://20.26.150.69:3001」給刪掉的。

<a href="http://20.26.150.69:3001/download/templete" download>模板下載</a>

方法二

根據create-react-app說明頁面的Configuring the Proxy Manually

All requests matching this path will be proxies, no exceptions. This includes requests for text/html, which the standard proxy option does not proxy.
意思是匹配此路徑的全部請求都將是代理，包括對text / html的請求。
因此，能夠將package.json裏面的

改爲相似這種形式，將Accept頭中有text / html的請求也歸入代理範圍內。

參考自：
FormData.append()