摘要:項目結構為前后端分離,中間布了一層。文件上傳要求將文件信息等發送到后臺。上傳文件時,使用表單上傳的,則需要設置表單的等于,因為該值默認值為使用庫上傳,需設置為。使用上傳,無需設置。
項目結構為前后端分離,中間布了一層node。
文件上傳要求:將文件信息等發送到后臺。
html代碼客戶端上傳文件時的信息處理
可以使用FormData來異步上傳一個二進制文件。上傳文件時,
使用form表單上傳的,則需要設置表單的 enctype 等于 multipart/form-data,因為該值默認值為application/x-www-form-urlencoded.
使用axios庫上傳,需設置Content-Type為multipart/form-data。
使用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代碼
模板下載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”給刪掉的。
模板下載方法二
根據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()
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108214.html
摘要:項目結構為前后端分離,中間布了一層。文件上傳要求將文件信息等發送到后臺。上傳文件時,使用表單上傳的,則需要設置表單的等于,因為該值默認值為使用庫上傳,需設置為。使用上傳,無需設置。 項目結構為前后端分離,中間布了一層node。 文件上傳 要求:將文件信息等發送到后臺。 html代碼 客戶端上傳文件時的信息處理 可以使用FormData來異步上傳一個二進制文件。上傳文件時, 使用f...
摘要:暴露所有內建配置,項目下會新增或對部分配置文件進行修改。開發環境開發時,前端項目和后端項目運行時端口端口不同,存在跨域問題。項目目錄結構優化項目目錄結構優化開發目錄主要是目錄,因此需要修改的目錄主要是目錄。 1 開發環境準備(windows) 1.1 安裝nodejs和npm 1) 下載nodejs安裝包:http://nodejs.org/en/download/ nodejs安...
摘要:編碼規范是獨角獸公司內部的編碼規范,該項目是上很受歡迎的一個開源項目,在前端開發中使用廣泛,本文的配置規則就是以編碼規范和編碼規范作為基礎的。 更新時間:2019-01-22React.js create-react-app 項目 + VSCode 編輯器 + ESLint 代碼檢查工具 + Airbnb 編碼規范 前言 為什么要使用 ESLint 在項目開發過程中,編寫符合團隊編碼規...
閱讀 1820·2021-11-23 09:51
閱讀 927·2021-10-08 10:05
閱讀 3421·2021-09-26 09:55
閱讀 1030·2021-09-22 15:21
閱讀 1626·2021-09-09 09:33
閱讀 1236·2019-08-30 15:56
閱讀 1275·2019-08-30 15:55
閱讀 958·2019-08-30 13:19