成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

文件的上傳與下載實(shí)現(xiàn)（react、express，create-react-app腳手架）

james / 2460人閱讀

摘要：項(xiàng)目結(jié)構(gòu)為前后端分離，中間布了一層。文件上傳要求將文件信息等發(fā)送到后臺(tái)。上傳文件時(shí)，使用表單上傳的，則需要設(shè)置表單的等于，因?yàn)樵撝的J(rèn)值為使用庫上傳，需設(shè)置為。使用上傳，無需設(shè)置。

項(xiàng)目結(jié)構(gòu)為前后端分離，中間布了一層node。

文件上傳

要求：將文件信息等發(fā)送到后臺(tái)。

html代碼
客戶端上傳文件時(shí)的信息處理

可以使用FormData來異步上傳一個(gè)二進(jìn)制文件。上傳文件時(shí)，

使用form表單上傳的，則需要設(shè)置表單的 enctype 等于 multipart/form-data，因?yàn)樵撝的J(rèn)值為application/x-www-form-urlencoded.

使用axios庫上傳，需設(shè)置Content-Type為multipart/form-data。

使用fetch上傳，無需設(shè)置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("上傳成功");
  });

成功發(fā)送數(shù)據(jù)的樣子

FormData若需傳輸數(shù)組之類的，根據(jù)后臺(tái)所使用的語言和框架選擇，例如后臺(tái)用的是PHP，可以這樣寫：

fileList.forEach((file) => {
   formData.append("files[]", file);
});
文件下載 html代碼 
 模板下載
node端處理

因?yàn)轫?xiàng)目中使用了express，所以可以直接通過res.download方法來下載文件。
在server.js文件里面添加

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

文件結(jié)構(gòu)為

問題

因?yàn)槭鞘褂胏reate-react-app搭建的，在本地開發(fā)環(huán)境測試下載文件的情況時(shí)，總是無法找到正確路徑進(jìn)行下載。后來在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.

大概意思就是，在開發(fā)時(shí)請求fetch("/api/todos"),開發(fā)服務(wù)器意識(shí)到它不是靜態(tài)資產(chǎn)，所以會(huì)將請求進(jìn)行代理。開發(fā)服務(wù)器只會(huì)將Accept頭中沒有text / html的請求進(jìn)行代理。

所以在本地開發(fā)環(huán)境下測試下載文件時(shí)，總是不能找到文件的正確路徑進(jìn)行下載。

解決 方法一

開發(fā)測試時(shí)直接將href寫成完整的請求路徑。當(dāng)然，測試完成后，還是要將“http://20.26.150.69:3001”給刪掉的。

模板下載
方法二

根據(jù)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的請求也納入代理范圍內(nèi)。

參考自：
FormData.append()

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108214.html

相關(guān)文章

  • 文件的上傳與下載實(shí)現(xiàn)（react、express，create-react-app腳手架）

    摘要：項(xiàng)目結(jié)構(gòu)為前后端分離，中間布了一層。文件上傳要求將文件信息等發(fā)送到后臺(tái)。上傳文件時(shí)，使用表單上傳的，則需要設(shè)置表單的等于，因?yàn)樵撝的J(rèn)值為使用庫上傳，需設(shè)置為。使用上傳，無需設(shè)置。 項(xiàng)目結(jié)構(gòu)為前后端分離，中間布了一層node。 文件上傳 要求：將文件信息等發(fā)送到后臺(tái)。 html代碼 客戶端上傳文件時(shí)的信息處理 可以使用FormData來異步上傳一個(gè)二進(jìn)制文件。上傳文件時(shí)， 使用f...

    Aceyclee 評(píng)論0 收藏0

  • react+express項(xiàng)目

    摘要：暴露所有內(nèi)建配置，項(xiàng)目下會(huì)新增或?qū)Σ糠峙渲梦募M(jìn)行修改。開發(fā)環(huán)境開發(fā)時(shí)，前端項(xiàng)目和后端項(xiàng)目運(yùn)行時(shí)端口端口不同，存在跨域問題。項(xiàng)目目錄結(jié)構(gòu)優(yōu)化項(xiàng)目目錄結(jié)構(gòu)優(yōu)化開發(fā)目錄主要是目錄，因此需要修改的目錄主要是目錄。 1 開發(fā)環(huán)境準(zhǔn)備（windows） 1.1 安裝nodejs和npm 1) 下載nodejs安裝包：http://nodejs.org/en/download/ nodejs安...

    Luosunce 評(píng)論0 收藏0

  • 在 React-CRA 應(yīng)用中配合 VSCode 使用 ESLint 實(shí)踐前端代碼規(guī)范

    摘要：編碼規(guī)范是獨(dú)角獸公司內(nèi)部的編碼規(guī)范，該項(xiàng)目是上很受歡迎的一個(gè)開源項(xiàng)目，在前端開發(fā)中使用廣泛，本文的配置規(guī)則就是以編碼規(guī)范和編碼規(guī)范作為基礎(chǔ)的。 更新時(shí)間：2019-01-22React.js create-react-app 項(xiàng)目 + VSCode 編輯器 + ESLint 代碼檢查工具 + Airbnb 編碼規(guī)范 前言 為什么要使用 ESLint 在項(xiàng)目開發(fā)過程中，編寫符合團(tuán)隊(duì)編碼規(guī)...

    Hujiawei 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<