国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Aceyclee / 2218人閱讀

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

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

文件上傳

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

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

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

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

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

使用fetch上傳，無(wú)需設(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)所使用的語(yǔ)言和框架選擇，例如后臺(tái)用的是PHP，可以這樣寫：

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

因?yàn)轫?xiàng)目中使用了express，所以可以直接通過(guò)res.download方法來(lái)下載文件。
在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)為

問(wèn)題

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

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

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

解決 方法一

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

模板下載
方法二

根據(jù)create-react-app說(shuō)明頁(yè)面的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.
意思是匹配此路徑的所有請(qǐng)求都將是代理，包括對(duì)text / html的請(qǐng)求。
所以，可以將package.json里面的

改成類似這種形式，將Accept頭中有text / html的請(qǐng)求也納入代理范圍內(nèi)。

參考自：
FormData.append()

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52873.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)值為使用庫(kù)上傳，需設(shè)置為。使用上傳，無(wú)需設(shè)置。 項(xiàng)目結(jié)構(gòu)為前后端分離，中間布了一層node。 文件上傳 要求：將文件信息等發(fā)送到后臺(tái)。 html代碼 客戶端上傳文件時(shí)的信息處理 可以使用FormData來(lái)異步上傳一個(gè)二進(jìn)制文件。上傳文件時(shí)， 使用f...

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

  • react+express項(xiàng)目

    摘要：暴露所有內(nèi)建配置，項(xiàng)目下會(huì)新增或?qū)Σ糠峙渲梦募M(jìn)行修改。開(kāi)發(fā)環(huán)境開(kāi)發(fā)時(shí)，前端項(xiàng)目和后端項(xiàng)目運(yùn)行時(shí)端口端口不同，存在跨域問(wèn)題。項(xiàng)目目錄結(jié)構(gòu)優(yōu)化項(xiàng)目目錄結(jié)構(gòu)優(yōu)化開(kāi)發(fā)目錄主要是目錄，因此需要修改的目錄主要是目錄。 1 開(kāi)發(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è)開(kāi)源項(xiàng)目，在前端開(kāi)發(fā)中使用廣泛，本文的配置規(guī)則就是以編碼規(guī)范和編碼規(guī)范作為基礎(chǔ)的。 更新時(shí)間：2019-01-22React.js create-react-app 項(xiàng)目 + VSCode 編輯器 + ESLint 代碼檢查工具 + Airbnb 編碼規(guī)范 前言 為什么要使用 ESLint 在項(xiàng)目開(kāi)發(fā)過(guò)程中，編寫符合團(tuán)隊(duì)編碼規(guī)...

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

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

0條評(píng)論

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