node如何實(shí)現(xiàn)圖片上傳

這篇文章主要介紹node如何實(shí)現(xiàn)圖片上傳，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)10年經(jīng)驗(yàn)成就非凡，專(zhuān)業(yè)從事成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)，成都網(wǎng)頁(yè)設(shè)計(jì)，成都網(wǎng)頁(yè)制作，軟文發(fā)稿，一元廣告等。10年來(lái)已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線(xiàn)：13518219792，我們期待您的來(lái)電！

在web開(kāi)發(fā)中，文件上傳是一個(gè)很重要的問(wèn)題，尤其是圖片上傳，以及由此延伸的“進(jìn)度條”、“文件大小”、以及著名的“跨域”等問(wèn)題。

本demo演示的是圖片的上傳，服務(wù)器代碼為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發(fā)送請(qǐng)求—— 其實(shí)我們這里也可以采用另一種“跨域請(qǐng)求方式”（vue-resource），但這里我想了想。還是采用 后端設(shè)置跨域的方式。

后端部分

這是本文要介紹的重點(diǎn)，為了用高效流暢的方式來(lái)解析文件上傳請(qǐng)求，我們先引入formidable庫(kù)：

npm install formidable --save

formidable的流式解析器讓它成為了處理文件上傳的絕佳選擇，也就是說(shuō)它能隨著數(shù)據(jù)塊的上傳接收它們，解析它們，并吐出特定的部分，相信熟悉流的朋友會(huì)很好理解。這種方式不僅快，還不會(huì)因?yàn)樾枰罅烤彌_而導(dǎo)致內(nèi)存膨脹，即便像視頻這種大型文件，也不會(huì)把進(jìn)程壓垮。
當(dāng)然，我們要?jiǎng)?chuàng)建myImage文件，用于存放上傳的圖片，接著，我們創(chuàng)建一個(gè)IncomingForm實(shí)例form，并且設(shè)置存放路徑為myImage文件夾。代碼如下：

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

var server=http.createServer(function(req,res){
	// 后端設(shè)置跨域
	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('請(qǐng)求錯(cuò)誤,請(qǐng)使用multipart/form-data格式');
		return;
	}
	
	var form=new formidable.IncomingForm();
	// 設(shè)置上傳圖片保存文件
	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尤其重要，這是后端跨域的精髓！

添加上傳進(jìn)度

這個(gè)也是我們常用的，并且所希望看到的！這會(huì)給用戶(hù)極好的體驗(yàn)感。
我們只要在上面代碼中添加：

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

然后把這個(gè)進(jìn)度傳回到用戶(hù)的瀏覽器中去，即可。

formidable

formidable模塊實(shí)現(xiàn)了上傳和編碼圖片和視頻。它支持GB級(jí)上傳數(shù)據(jù)處理，支持多種客戶(hù)端數(shù)據(jù)提交。有極高的測(cè)試覆蓋率，非常適合在生產(chǎn)環(huán)境中使用。
formidable模塊的方法和屬性 —— 圍繞：Formidable.incomingForm()

可以通過(guò)該方法創(chuàng)建一個(gè)form表單：

var form = new formidable.IncomingForm()；

通過(guò)encoding屬性設(shè)置字段編碼

form.encoding='utf-8';

通過(guò)uploadDir設(shè)置上傳文件時(shí)臨時(shí)文件存放的位置，默認(rèn)上傳的臨時(shí)文件存放的位置為os.tmpDir();

form.uploadDir='/tmp/';

通過(guò)keepExtensions屬性可以設(shè)置文件上傳時(shí)臨時(shí)文件的文件名是否包括擴(kuò)展名。如果該值為真，即為包括擴(kuò)展名，否則，就不包括擴(kuò)展名。

form.keepExtensions=false

還有比較重要的“ parse方法 ”：解析node.js中request請(qǐng)求中包含的form表單提交的數(shù)據(jù)。cb為處理請(qǐng)求的回調(diào)函數(shù)（不必須）。

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

以上是“node如何實(shí)現(xiàn)圖片上傳”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：node如何實(shí)現(xiàn)圖片上傳
本文網(wǎng)址：http://jinyejixie.com/article4/pggdoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、ChatGPT、自適應(yīng)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

node如何實(shí)現(xiàn)圖片上傳

前端部分

后端部分

添加上傳進(jìn)度

formidable