日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
如何在Node.js中使用FilePond

上傳文件是云應(yīng)用程序的常見需求。FilePond是一個(gè)可靠的開源項(xiàng)目，它為React和Svelte等許多 JavaScript 框架提供了復(fù)雜的文件處理和包裝器。

創(chuàng)新互聯(lián)建站專注于五原網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供五原營(yíng)銷型網(wǎng)站建設(shè)，五原網(wǎng)站制作、五原網(wǎng)頁(yè)設(shè)計(jì)、五原網(wǎng)站官網(wǎng)定制、微信平臺(tái)小程序開發(fā)服務(wù)，打造五原網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供五原網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

本文詳細(xì)地概述了使用 FilePond 、 Node.js 和 Express 后端處理文件上傳。

為什么要使用FilePond？

有許多庫(kù)可用于文件上傳，但 FilePond 非常易于使用，并且無需額外配置即可處理圖像優(yōu)化等細(xì)節(jié)。此外，它在服務(wù)器端為開發(fā)人員提供了一個(gè)清晰的流程。

再加上對(duì) Angular、jQuery、React、Vue 和 Svelte 的支持以及圖像預(yù)覽和縮放器等眾多插件，F(xiàn)ilePond在考慮文件上載時(shí)應(yīng)該位于選項(xiàng)列表的頂部。

設(shè)置 FilePond 項(xiàng)目

首先設(shè)置一個(gè)項(xiàng)目來保存示例代碼。創(chuàng)建一個(gè)目錄并將其命名為 /filepond。然后轉(zhuǎn)到命令行上的目錄并鍵入npm init. 接受所有默認(rèn)值。

下一步使用npm install Express安裝Express服務(wù)器。接下來，創(chuàng)建一個(gè) index.html 文件并將其放在項(xiàng)目根目錄中。使用清單 1 的內(nèi)容來更新新文件。

清單 1. 開始 index.html

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. 
  
  
  
  
  7.   
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. 
  
  
  
  
  10.

清單 1 首先從 unpkg CDN 中導(dǎo)入 FilePond 樣式和代碼。還可以通過 npm 和構(gòu)建工具集成或直接導(dǎo)入它。

標(biāo)記僅包含一個(gè)文件輸入。最后，底部的腳本獲取對(duì)文件輸入的引用，然后使用FilePond API使用輸入元素FilePond.create（inputElement）創(chuàng)建一個(gè)新的FilePond實(shí)例。

現(xiàn)在將添加一個(gè)腳本來運(yùn)行應(yīng)用程序。修改 package.json 文件以包含清單 2 中的第 7 行。

清單 2. 添加開發(fā)（dev）腳本

 
 
 
 
    
  
  
  
  
  1. {
    2. 
  
  
  
  
  2.   "name": "filepond",
    3. 
  
  
  
  
  3.   "version": "1.0.0",
    4. 
  
  
  
  
  4.   "description": "",
    5. 
  
  
  
  
  5.   "main": "index.js",
    6. 
  
  
  
  
  6.   "scripts": {
    7. 
  
  
  
  
  7.     "dev": "nodemon server.js",
    8. 
  
  
  
  
  8.     "test": "echo \"Error: no test specified\" && exit 1"
    9. 
  
  
  
  
  9.   },
    10. 
  
  
  
  
  10.   "author": "",
    11. 
  
  
  
  
  11.   "license": "ISC",
    12. 
  
  
  
  
  12.   "dependencies": {
    13. 
  
  
  
  
  13.     "express": "^4.17.1"
    14. 
  
  
  
  
  14.   }
    15. 
  
  
  
  
  15. }   
    16.

通過在CLI中鍵入nodemon-v，確保全局安裝了nodemon。如果找不到，請(qǐng)使用npm install -g nodemon.

現(xiàn)在，可以在項(xiàng)目根目錄下輸入npm run dev來運(yùn)行應(yīng)用程序。

在應(yīng)用程序運(yùn)行時(shí)，可以通過打開瀏覽器訪問http://localhost:43000/來訪問簡(jiǎn)單的起始頁(yè)。

將會(huì)看到一個(gè)簡(jiǎn)單的文件輸入組件。盡管 FilePond 尚未綁定到后端，但可以繼續(xù)從本地文件系統(tǒng)中選擇一個(gè)文件，方法是單擊“瀏覽”或?qū)⑽募系?FilePond 組件上，F(xiàn)ilePond 將按照順序進(jìn)行為其排隊(duì)。

處理文件上傳

與后端交互的第一步是告訴 FilePond 的位置在哪里。FilePond 可以處理任何 URL。在本例子中，我們將使用來自同一域的相對(duì)路徑。如果使用指向另一個(gè)域的絕對(duì) URL，那么CORS將發(fā)揮作用。

修改 index.html 中的腳本以包含清單 3 中所示的配置。

清單 3. 設(shè)置服務(wù)器 URL

 
 
 
 
    
  
  
  
  
  1.

清單 3 告訴 FilePond （通過 POST）將文件位發(fā)送到相對(duì) URL /upload。讓我們?cè)诜?wù)器上準(zhǔn)備一個(gè)簡(jiǎn)單的處理程序來驗(yàn)證端點(diǎn)是否被命中。將清單 4 中的代碼添加到 index.js 文件中。

清單 4. 映射 /upload POST

 
 
 
 
    
  
  
  
  
  1. app.post("/upload", function(req, res){
    2. 
  
  
  
  
  2.   console.log("BEGIN /upload");
    3. 
  
  
  
  
  3. })
    4.

然后返回瀏覽器并刷新頁(yè)面。當(dāng)上傳文件時(shí)，可以通過查看服務(wù)器日志并查看“BEGIN /upload”輸出來驗(yàn)證是否正在訪問端點(diǎn)。

保存臨時(shí)文件

上傳文件時(shí)，服務(wù)器首先將文件臨時(shí)寫入某個(gè)位置。服務(wù)器用唯一 ID 響應(yīng)以確認(rèn)上傳，當(dāng)客戶端提交包含文件輸入的表單時(shí)，它將包含唯一 ID。然后，服務(wù)器使用唯一 ID 來定位臨時(shí)文件并將該文件移動(dòng)到其長(zhǎng)期位置。

也可以采用多種不同的方法來支持服務(wù)器端的這些需求，同時(shí)使用文件系統(tǒng)和數(shù)據(jù)庫(kù)。

本示例將使用Formidable庫(kù)來處理 FilePond 發(fā)送的多部分 POST。Formidable 是一個(gè)成熟且功能強(qiáng)大的庫(kù)，它的靈活性足以編寫自定義流處理程序。例如，如果想將文件保存到數(shù)據(jù)庫(kù)中，可以自己處理文件塊并將它們流式傳輸?shù)綌?shù)據(jù)存儲(chǔ)。

在本演示中，只需將簡(jiǎn)單地將臨時(shí)文件寫入磁盤。首先安裝 Formidable：停止服務(wù)器（如果正在運(yùn)行）并鍵入npm install formidable. 現(xiàn)在您可以重新啟動(dòng)服務(wù)器。

轉(zhuǎn)到 index.js 并通過在文件開頭插入以下行來導(dǎo)入庫(kù)：

const formidable = require('formidable');

然后使用清i單 5 更新ndex.js。

清單 5. 接受臨時(shí)文件

 
 
 
 
    
  
  
  
  
  1. app.post("/upload", function(req, res){
    2. 
  
  
  
  
  2.   console.log("BEGIN /upload");
    3. 
  
  
  
  
  3.   const form = formidable({ multiples: false });
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.   form.parse(req, (err, fields, files) => {
    6. 
  
  
  
  
  6.     if (err) {
    7. 
  
  
  
  
  7.       next(err);
    8. 
  
  
  
  
  8.       return;
    9. 
  
  
  
  
  9.     }
    10. 
  
  
  
  
  10.     let theFile = files.filepond.path;
    11. 
  
  
  
  
  11.     console.log("theFile: " + theFile);
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.     res.writeHead(200, { 'Content-Type': 'text/plain' });
    14. 
  
  
  
  
  14.     res.end(theFile);
    15. 
  
  
  
  
  15.   });  
    16. 
  
  
  
  
  16. })
    17.

使用 Formidable接受文件是輕而易舉的。如果通過 Web 界面上傳文件，將在日志記錄中看到該文件已寫入默認(rèn)的臨時(shí)文件位置。例如，在我的本地系統(tǒng)上，即 C:\Users\mtyson\AppData\Local\Temp\。即可以打開文件并驗(yàn)證它是你發(fā)送的文件。

請(qǐng)注意，應(yīng)用程序使用文件路徑發(fā)送純文本響應(yīng)。這在現(xiàn)實(shí)場(chǎng)景中是不安全的，因?yàn)樽罱K用戶可以看到文件結(jié)構(gòu)并收集有關(guān)系統(tǒng)的信息（就像我的文件路徑顯示它是 Windows 系統(tǒng)一樣）。

對(duì)于生產(chǎn)用途，需要一個(gè)間接層，以便保存文件并創(chuàng)建一個(gè)與文件路徑相關(guān)聯(lián)的唯一 ID。出于安全的目的，我們將只使用文件路徑。

完成文件上傳

現(xiàn)在回到客戶端。將上傳器包裝在一個(gè)表單中并提交，并考慮將文件保存在何處以供長(zhǎng)期存儲(chǔ)。由于表單僅發(fā)送文件的路徑（或唯一 ID），因此可以將其作為帶有 JSON 的 AJAX 請(qǐng)求輕松處理。保持文件傳輸?shù)暮?jiǎn)單性，并在示例中使用表單提交，如清單 6 所示。

清單 6. uploader表單

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.     Save It
    5. 
  
  
  
  
  5.   
    6. 
  
  
  
  
  6.

現(xiàn)在，當(dāng)單擊按鈕時(shí)，將提交文件路徑，默認(rèn)標(biāo)簽為“filepond”（這是可配置的）。在這種情況下，我們通過 POST 將信息發(fā)送到 /save。

請(qǐng)注意，如果將文件輸入設(shè)置為“多個(gè)支持”，F(xiàn)ilePond 將處理排隊(duì)的多個(gè)文件。

要處理提交，返回 index.js 并使用 Express urlencoded 中間件：

 
 
 
 
    
  
  
  
  
  1. app.use(express.urlencoded({ extended: true }));
    2.

現(xiàn)在就可以準(zhǔn)備好接收文件信息。添加如清單 7 所示的處理程序。

清單 7. 接收保存

 
 
 
 
    
  
  
  
  
  1. app.post("/save", function(req, res){
    2. 
  
  
  
  
  2.   console.log("BEGIN /save");
    3. 
  
  
  
  
  3.   console.log(`req: ${JSON.stringify(req.body)}`);
    4. 
  
  
  
  
  4. })
    5.

清單 7 中的處理程序就位后，應(yīng)該可以看到日志以確認(rèn)信息已經(jīng)到達(dá)。日志記錄將如下所示：

 
 
 
 
    
  
  
  
  
  1. req: {"filepond":"C:\\Users\\mtyson\\AppData\\Local\\Temp\\upload_28331577a229fe48443275b2655a1abe"}
    2.

現(xiàn)在，可以從磁盤讀取該文件并對(duì)其執(zhí)行所需操作。使用 Node 的內(nèi)置 fs 模塊從磁盤讀取它，如清單 8 所示。

清單 8. 從磁盤讀取臨時(shí)文件

 
 
 
 
    
  
  
  
  
  1. const fs =要求( 'fs' ); //...讓fileData = fs . readFileSync ( req . body . filepond ); 
    2.

清單 8 創(chuàng)建了文件的緩沖區(qū)對(duì)象。當(dāng)然也可以使用Amazon上的ODFS或bucket將文件寫入另一個(gè)系統(tǒng)（如Amazon上的一個(gè)模塊）。

例如，在 MongoDB 中，可以按原樣獲取緩沖區(qū)并將其寫入如下字段：

 
 
 
 
    
  
  
  
  
  1. require('mongodb').Binary(fileData)
    2.

這總結(jié)了上傳和保存文件的完整周期。我們將看看圖像預(yù)覽器擴(kuò)展。

將圖像預(yù)覽器添加到應(yīng)用程序很簡(jiǎn)單，如清單 9 所示。

清單 9. 圖像預(yù)覽器插件

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.   ...
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. 
  
  
  
  
  7.  ...
    8. 
  
  
  
  
  8.  FilePond.registerPlugin(FilePondPluginImagePreview);
    9. 
  
  
  
  
  9.  ...
    10. 
  
  
  
  
  10.

當(dāng)你上傳一個(gè)圖像文件時(shí)，你將看到一個(gè)預(yù)覽，如圖1所示。

圖1.圖像預(yù)覽器

正如你所看到的，F(xiàn)ilePond在一個(gè)易于使用的API中提供了一個(gè)現(xiàn)代的文件上傳器組件。還有許多其他FilePond插件可用，包括一個(gè)完整的圖像編輯器（通過與Pintura/Doka集成）。


文章題目：如何在Node.js中使用FilePond
URL分享：http://www.5511xx.com/article/cocoeoo.html