單文件上傳

如果想要上傳文件,必須藉助formidable模塊 

該模塊引入之後,除了可以處理普通的post請求之外的數據,還可以處理上傳的圖片文件等數據……

注意:此時,必須要給form表單設置enctype屬性類型為multipart/form-data,才能夠讓formidable解析req對象

使用步驟:

1 瀏覽器端,修改enctype類型為multipart/form-data

2 服務器端,引入 formidable 模塊並實例化 (實例化對象中有個uploadDir表示上傳文件存儲的路徑)

3 服務器端,修改文件存儲位置,通過process.cwd()獲取指令執行時的位置

4 服務器端,通過fd.parse解析請求對象,獲取上傳的文件信息 (fd為formidable的實例化對象)

  fd.parse(req, (err, fileds, files))

    err: 異常參數,成功時為null

    fileds:解析post請求的數據

    files:上傳的文件

5 服務器端,通過 fs 模塊,存儲上傳的文件。

freefilesync單向傳輸_實例化

多文件上傳

如果想要選中多個文件,必須給input元素添加multiple屬性,此時,就可以按下ctrl同時選中多張圖片

但是如果還是使用單文件上傳的方式接收文件就不行了,此時要再服務器端監聽一個事件: file事件,該事件會在每一次上傳的時候都會執行一次

freefilesync單向傳輸_服務器端_02

 

 上傳文件時,input設置accept="image/*"; 可以確保只能選擇圖片上傳