淺談node實作圖片上傳的方法-js教程-PHP中文網

前端部分

後端部分

新增上傳進度

formidable

首頁

web前端

js教程

淺談node實作圖片上傳的方法

青灯夜游

Mar 05, 2021 am 10:02 AM

node 圖片上傳文件上傳

本篇文章為大家介紹一下node實作圖片檔案上傳的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

淺談node實作圖片上傳的方法

前端部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <input type="file" name="file" accept="image/*" onchange="changeImg(event)"/>
  <button onclick="submit()">上传</button>

  <script>
    let file = ''
    let fileName = ''

    function submit() {
      let data = new FormData()
      data.append('imgName', fileName)
      data.append('img', file)

      axios({
        method: 'post',
        timeout: 2000,
        url: 'http://localhost:8081/postApi',
        data: data
      })
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    }

    function changeImg(e) {
      file = e.target.files.item(0)   //只能选择一张图片
      // 如果不选择图片
      if (file === null) {
        return
      }
      fileName = file.name
    }
  </script>
</body>
</html>

登入後複製

採用axios發送請求 —— 其實我們這裡也可以採用另一種「跨域請求方式」（ vue-resource），但這裡我想了想。還是採用 後端設定跨域 的方式。

後端部分

這是本文要介紹的重點，為了用高效能流暢的方式來解析文件上傳請求，我們先引入formidable庫：

npm install formidable --save

登入後複製

formidable的串流解析器讓它成為了處理檔案上傳的絕佳選擇，也就是說它能隨著資料區塊的上傳接收它們，解析它們，並吐出特定的部分，相信熟悉流的朋友會很好理解。這種方式不僅快，還不會因為需要大量緩衝而導致記憶體膨脹，即便像視訊這種大型文件，也不會把進程壓垮。
當然，我們要建立myImage文件，用於存放上傳的圖片，接著，我們建立一個IncomingForm實例form，並且設定存放路徑為myImage資料夾。程式碼如下：

const http=require('http');
const formidable=require('formidable');

var server=http.createServer(function(req,res){
	// 后端设置跨域
	res.setHeader('Access-Control-Allow-Origin','*');
	res.setHeader('Access-Control-Allow-Headers','Content-Type');
	res.setHeader('Content-Type','application/json');
	
	switch(req.method){
		case 'OPTIONS':
			res.statusCode=200;
			res.end();
			break;
		case 'POST':
			upload(req,res);
			break;
	}
})

function upload(req,res){
	if(!isFormData(req)){
		res.statusCode=400;
		res.end('请求错误,请使用multipart/form-data格式');
		return;
	}
	
	var form=new formidable.IncomingForm();
	// 设置上传图片保存文件
	form.uploadDir='./myImage';
	form.keepExtensions=true;
	
	form.on('field',(field,value)=>{
		console.log(field);
		console.log(value);
	})
	form.on('end',()=>{
		res.end('上传完成!');
	})
	form.parse(req);
}

function isFormData(req){
	let type=req.headers['content-type'] || '';
	return type.includes('multipart/form-data');
}

server.listen(8081,function(){
	console.log('port is on 8081');
})

登入後複製

6、7、8三行setHeader尤其重要，這是後端跨域的精髓！

新增上傳進度

這個也是我們常用的，並且希望看到的！這會給用戶極佳的體驗感。
我們只要在上面程式碼中加入：

	form.on('progress',(bytesReceived,bytesExpected)=>{
		var precent=Math.floor(bytesReceived/bytesExpected*100);
		console.log(precent);
	})

登入後複製

然後把這個進度傳回用戶的瀏覽器中去，即可。

formidable

formidable模組實作了上傳和編碼圖片和影片。它支援GB級上傳資料處理，支援多種客戶端資料提交。有極高的測試覆蓋率，非常適合在生產環境中使用。
formidable模組的方法與屬性－圍繞：Formidable.incomingForm()

可以透過此方法建立一個form表單：

var form = new formidable.IncomingForm()；

登入後複製

透過encoding屬性設定字段編碼

form.encoding='utf-8';

登入後複製

透過uploadDir設定上傳檔案時臨時檔案存放的位置，預設上傳的臨時檔案存放的位置為os.tmpDir();

form.uploadDir='/tmp/';

登入後複製

透過keepExtensions屬性可以設定檔案上傳時臨時檔案的檔案名稱是否包含副檔名。如果該值為真，即為包含副檔名，否則，就不包含副檔名。

form.keepExtensions=false

登入後複製

還有比較重要的「 parse方法」：解析node.js中request請求中包含的form表單提交的資料。 cb為處理請求的回呼函數（不必須）。

form.parse(req,function(err,fields,files){
    //...
});

登入後複製

更多程式相關知識，請造訪：程式設計影片！！

以上是淺談node實作圖片上傳的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7859

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1242

Related knowledge

實作Workerman文件中的文件上傳與下載 Nov 08, 2023 pm 06:02 PM

實現Workerman文件中的文件上傳與下載，需要具體程式碼範例引言：Workerman是一款高效能的PHP非同步網路通訊框架，具備簡潔、高效、易用等特點。在實際開發中，文件上傳和下載是常見的功能需求，本文將介紹如何使用Workerman框架實現文件的上傳和下載，並給出具體的程式碼範例。一、檔案上傳：檔案上傳是指將本機上的檔案傳輸至伺服器端的操作。下面是使用

如何利用Laravel實作檔案上傳與下載功能 Nov 02, 2023 pm 04:36 PM

如何利用Laravel實現文件上傳和下載功能Laravel是一個流行的PHPWeb框架，提供了豐富的功能和工具，使得開發Web應用程式更加簡單和有效率。其中一個常用的功能就是檔案上傳和下載。本文將介紹如何利用Laravel實作檔案上傳和下載功能，並提供具體的程式碼範例。文件上傳文件上傳是指將本機的文件上傳到伺服器上儲存。在Laravel中，我們可以使用檔案上傳

如何解決Java檔案上傳異常（FileUploadException） Aug 18, 2023 pm 12:11 PM

如何解決Java檔案上傳異常（FileUploadException）上傳檔案在網路開發中經常會遇到的一個問題是FileUploadException（檔案上傳例外）。它可能會因各種原因而出現，例如檔案大小超過限制、檔案格式不符或伺服器配置不正確等。本文將介紹一些解決這些問題的方法，並提供相應的程式碼範例。限制上傳檔案的大小在大多數場景下，限製檔案大小

Laravel中的文件上傳和處理：管理用戶上傳的文件 Aug 13, 2023 pm 06:45 PM

Laravel中的檔案上傳與處理：管理使用者上傳的檔案引言：在現代Web應用程式中，檔案上傳是很常見的功能需求。在Laravel框架中，文件上傳和處理變得非常簡單和有效率。本文將介紹如何在Laravel中管理使用者上傳的文件，包括文件上傳的驗證、儲存、處理和顯示。一、文件上傳文件上傳是指將文件從客戶端上傳到伺服器端。在Laravel中，檔案上傳非常容易處理。首先，

如何在 Golang 中使用 gRPC 實作檔案上傳？ Jun 03, 2024 pm 04:54 PM

如何使用gRPC實作檔案上傳？建立配套服務定義，包括請求和回應訊息。在客戶端，開啟要上傳的檔案並將其分成區塊，然後透過gRPC串流傳輸到服務端。在服務端，接收文件區塊並將其儲存到文件中。服務端在文件上傳完成後發送回應，指示上傳是否成功。

如何用PHP實作FTP檔案上傳進度條 Jul 30, 2023 pm 06:51 PM

如何用PHP實作FTP檔案上傳進度條一、背景介紹在網站開發中，檔案上傳是常見的功能。而對於大檔案的上傳，為了提高使用者體驗，我們常常需要向使用者顯示一個上傳進度條，讓使用者知道檔案上傳的進程。本文將介紹如何使用PHP實作FTP檔案上傳進度條的功能。二、FTP檔案上傳進度條的實現方法基本思路FTP檔案上傳的進度條實現，通常是透過計算上傳的檔案大小和已上傳檔案大小

用Golang函數簡化檔案上傳處理 May 02, 2024 pm 06:45 PM

答案：是，Golang提供的函數可以簡化檔案上傳處理。詳情：MultipartFile類型提供對文件元資料和內容的存取。 FormFile函數從表單請求中取得特定檔案。 ParseForm和ParseMultipartForm函數用於解析表單資料和多部分錶單資料。使用這些函數簡化了文件處理流程，讓開發者專注於業務邏輯。

Pi Node教學：什麼是Pi節點？如何安裝和設定Pi Node？ Mar 05, 2025 pm 05:57 PM

PiNetwork節點詳解及安裝指南本文將詳細介紹PiNetwork生態系統中的關鍵角色——Pi節點，並提供安裝和配置的完整步驟。 Pi節點在PiNetwork區塊鏈測試網推出後，成為眾多先鋒積極參與測試的重要環節，為即將到來的主網發布做準備。如果您還不了解PiNetwork，請參考Pi幣是什麼？上市價格多少？ Pi用途、挖礦及安全性分析。什麼是PiNetwork？ PiNetwork項目始於2019年，擁有其專屬加密貨幣Pi幣。該項目旨在創建一個人人可參與

See all articles

淺談node實作圖片上傳的方法

前端部分

後端部分

新增上傳進度

formidable

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題