溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹node如何實現(xiàn)圖片上傳，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
在web開發(fā)中，文件上傳是一個很重要的問題，尤其是圖片上傳，以及由此延伸的“進度條”、“文件大小”、以及著名的“跨域”等問題。
本demo演示的是圖片的上傳，服務器代碼為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ā)送請求 —— 其實我們這里也可以采用另一種“跨域請求方式”（vue-resource），但這里我想了想。還是采用 后端設置跨域 的方式。
這是本文要介紹的重點，為了用高效流暢的方式來解析文件上傳請求，我們先引入formidable庫：
npm install formidable --save
formidable的流式解析器讓它成為了處理文件上傳的絕佳選擇，也就是說它能隨著數(shù)據塊的上傳接收它們，解析它們，并吐出特定的部分，相信熟悉流的朋友會很好理解。這種方式不僅快，還不會因為需要大量緩沖而導致內存膨脹，即便像視頻這種大型文件，也不會把進程壓垮。
當然，我們要創(chuàng)建myImage文件，用于存放上傳的圖片，接著，我們創(chuàng)建一個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模塊實現(xiàn)了上傳和編碼圖片和視頻。它支持GB級上傳數(shù)據處理，支持多種客戶端數(shù)據提交。有極高的測試覆蓋率，非常適合在生產環(huán)境中使用。
formidable模塊的方法和屬性 —— 圍繞：Formidable.incomingForm()
可以通過該方法創(chuàng)建一個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表單提交的數(shù)據。cb為處理請求的回調函數(shù)（不必須）。
form.parse(req,function(err,fields,files){
//...
});以上是“node如何實現(xiàn)圖片上傳”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
