首頁 > 文章 > web前端 > 淺談node實作圖片上傳的方法

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

青灯夜游轉載: 2021-03-05 10:02:513714瀏覽

本篇文章為大家介紹一下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中文網其他相關文章！

陳述：

本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除

上一篇：JavaScript專題之四：節流下一篇：JavaScript專題之四：節流

看更多