資訊專欄INFORMATION COLUMN
摘要：前端上傳文件，圖片，后端接收文件學(xué)習(xí)了，就想實(shí)現(xiàn)一下有進(jìn)度條的文件上傳，在做這個(gè)功能的時(shí)候遇到的問題用普通的無法實(shí)現(xiàn)文件上傳，只能，，一些，字符串想要上傳文件或者圖片，可以添加上傳注意需要在上添加標(biāo)示缺點(diǎn)，這樣會(huì)倒置頁面的刷新很糟糕有沒有
前端ajax上傳文件，圖片，后端nodejs接收文件；
學(xué)習(xí)了nodejs，就想實(shí)現(xiàn)一下有進(jìn)度條的文件上傳，
在做這個(gè)功能的時(shí)候遇到的問題
用普通的ajax無法實(shí)現(xiàn)文件上傳，只能post，get，一些json，string字符串；
想要上傳文件或者圖片，可以添加form上傳；注意需要在form上添加 標(biāo)示 enctype="multipart/form-data"
缺點(diǎn)，這樣會(huì)倒置頁面的刷新；很糟糕有沒有
還可以在頁面中添加一個(gè)ifame,將表單提交到ifame中，不過，一聽說有iframe就有點(diǎn)糟心有沒有；
于是就有了下面的東西；
請(qǐng)自動(dòng)忽略沒有樣式(只是為了實(shí)現(xiàn)功能)這個(gè)梗，啊哈哈；
好了廢話少說直接上代碼
前端部分代碼
Document
用到了 FormData 類；
使用方法
通過new FormData 創(chuàng)建一個(gè)form提交實(shí)例對(duì)象；此對(duì)象會(huì)有append方法，
用法 oMyform.append(name,value) name是一個(gè)字段，value是對(duì)應(yīng)的值(可以是字符串，數(shù)字，file文件（通過dom.files[0]獲得）)
var oMyForm = new FormData();
oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456);
oMyForm.append("userfile", fileInputElement.files[0]);
用到了XMLHttpRequest 的 onprogress 和 onloadend
注意 onprogress、onloadend、需要通過xhr.upload 調(diào)用如下；
oReq.upload.onprogress=function(e){
console.log(e.loaded)
console.log(e.total)
};
oReq.upload.onloadend=function(e){};
nodejs 后端的處理
主要代碼邏輯主要用到了formidable模塊
/**
* [導(dǎo)出一個(gè)中間件，formupload，用于處理文件上傳；]
*/
exports.formupload = function(req,res,next){
//console.log(req);
var form = new formidable.IncomingForm();
var uploadDir = path.normalize(__dirname+"/"+"../avatar");
form.uploadDir = uploadDir;
console.log(uploadDir);
form.parse(req, function(err, fields, files) {
for(item in files){
(function(){
var oldname = files[item].path;
var newname = files[item].name === "blob" ? oldname+".xml" : oldname+"."+files[item].name.split(".")[1];
fs.rename(oldname,newname,function(err){
if(err) console.log(err);
console.log("修改成功");
})
})(item);
}
console.log(util.inspect({fields: fields, files: files}));
res.send("2");
});
遇到的問題
for 循環(huán)中有異步邏輯，導(dǎo)致異步邏輯出現(xiàn)問題；
formidable 的上傳文件路徑用相對(duì)路徑會(huì)找不到所指定的路徑
解決辦法可以用閉包實(shí)現(xiàn)，每次傳進(jìn)到閉包的變量不會(huì)受到外界的影響；
用牛逼的__dirname 變量；指向當(dāng)前文件的絕對(duì)路徑；
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80369.html
摘要：把文件上傳路徑指定到然后用當(dāng)前日期和文件名命名上傳過來的文件。后端利用建立服務(wù)器，利用中間件指定文件路徑。利用這個(gè)前端和后端技術(shù)，我們基本上就可以做出一個(gè)圖片上傳存儲(chǔ)的基本網(wǎng)站核心。 前幾天看了騰訊云社區(qū)的一個(gè)文件上傳的文章文件上傳那些事兒，大體上講了以下h5中圖片上傳的幾個(gè)核心原理，但是沒有后端接受的服務(wù)器代碼，沒法做測試。也沒有具體的一個(gè)實(shí)例都是一些基本的原理片段，并且ui界面也不...
摘要：默認(rèn)地，表單數(shù)據(jù)會(huì)編碼為。就是說，在發(fā)送到服務(wù)器之前，所有字符都會(huì)進(jìn)行編碼空格轉(zhuǎn)換為加號(hào)，特殊符號(hào)轉(zhuǎn)換為值。提交說明文件上傳。圖片選擇圖片地址上傳上傳。用表單直接構(gòu)造對(duì)象就不需要下面的方法來為表單進(jìn)行賦值了。 nodejs圖片上傳 nodejs一般開發(fā)網(wǎng)站基本都用express框架，本文也主要以express為例，講解如何上傳圖片；express本身沒有上傳圖片功能；一般都是集成相應(yīng)的...
摘要：我相信很多使用的朋友，都有采用上傳圖片的需求，因?yàn)榍昂蠖朔蛛x后，我們希望都能用來解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會(huì)導(dǎo)致提交成功后頁面跳轉(zhuǎn)，而使用能夠無刷新上傳圖片等文件。 我相信很多使用vuejs的朋友，都有采用ajax上傳圖片的需求，因?yàn)榍昂蠖朔蛛x后，我們希望都能用ajax來解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會(huì)導(dǎo)致提交成功后頁面跳轉(zhuǎn)，而使用ajax能夠無刷新上傳圖片等文件。其實(shí)已經(jīng)有朋友封裝了...
閱讀 1541·2021-11-22 09:34
閱讀 3335·2021-09-29 09:35
閱讀 582·2021-09-04 16:40
閱讀 2925·2019-08-30 15:53
閱讀 2601·2019-08-30 15:44
閱讀 2596·2019-08-30 14:10
閱讀 1339·2019-08-29 18:43
閱讀 2223·2019-08-29 13:26
