摘要:前端上傳文件,圖片,后端接收文件學習了,就想實現一下有進度條的文件上傳,在做這個功能的時候遇到的問題用普通的無法實現文件上傳,只能,,一些,字符串想要上傳文件或者圖片,可以添加上傳注意需要在上添加標示缺點,這樣會倒置頁面的刷新很糟糕有沒有
前端ajax上傳文件,圖片,后端nodejs接收文件;
學習了nodejs,就想實現一下有進度條的文件上傳,
在做這個功能的時候遇到的問題
用普通的ajax無法實現文件上傳,只能post,get,一些json,string字符串;
想要上傳文件或者圖片,可以添加form上傳;注意需要在form上添加 標示 enctype="multipart/form-data"
缺點,這樣會倒置頁面的刷新;很糟糕有沒有
還可以在頁面中添加一個ifame,將表單提交到ifame中,不過,一聽說有iframe就有點糟心有沒有;
于是就有了下面的東西;
請自動忽略沒有樣式(只是為了實現功能)這個梗,啊哈哈;
好了廢話少說直接上代碼
前端部分代碼用到了 FormData 類;Document
使用方法
通過new FormData 創建一個form提交實例對象;此對象會有append方法,
用法 oMyform.append(name,value) name是一個字段,value是對應的值(可以是字符串,數字,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 調用如下;
oReq.upload.onprogress=function(e){ console.log(e.loaded) console.log(e.total) }; oReq.upload.onloadend=function(e){};nodejs 后端的處理
主要代碼邏輯主要用到了formidable模塊
/** * [導出一個中間件,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 循環中有異步邏輯,導致異步邏輯出現問題;
formidable 的上傳文件路徑用相對路徑會找不到所指定的路徑
解決辦法可以用閉包實現,每次傳進到閉包的變量不會受到外界的影響;
用牛逼的__dirname 變量;指向當前文件的絕對路徑;
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80369.html
摘要:把文件上傳路徑指定到然后用當前日期和文件名命名上傳過來的文件。后端利用建立服務器,利用中間件指定文件路徑。利用這個前端和后端技術,我們基本上就可以做出一個圖片上傳存儲的基本網站核心。 前幾天看了騰訊云社區的一個文件上傳的文章文件上傳那些事兒,大體上講了以下h5中圖片上傳的幾個核心原理,但是沒有后端接受的服務器代碼,沒法做測試。也沒有具體的一個實例都是一些基本的原理片段,并且ui界面也不...
摘要:默認地,表單數據會編碼為。就是說,在發送到服務器之前,所有字符都會進行編碼空格轉換為加號,特殊符號轉換為值。提交說明文件上傳。圖片選擇圖片地址上傳上傳。用表單直接構造對象就不需要下面的方法來為表單進行賦值了。 nodejs圖片上傳 nodejs一般開發網站基本都用express框架,本文也主要以express為例,講解如何上傳圖片;express本身沒有上傳圖片功能;一般都是集成相應的...
摘要:我相信很多使用的朋友,都有采用上傳圖片的需求,因為前后端分離后,我們希望都能用來解決數據問題,傳統的表單提交會導致提交成功后頁面跳轉,而使用能夠無刷新上傳圖片等文件。 我相信很多使用vuejs的朋友,都有采用ajax上傳圖片的需求,因為前后端分離后,我們希望都能用ajax來解決數據問題,傳統的表單提交會導致提交成功后頁面跳轉,而使用ajax能夠無刷新上傳圖片等文件。其實已經有朋友封裝了...
閱讀 1505·2021-11-22 09:34
閱讀 3320·2021-09-29 09:35
閱讀 562·2021-09-04 16:40
閱讀 2912·2019-08-30 15:53
閱讀 2582·2019-08-30 15:44
閱讀 2584·2019-08-30 14:10
閱讀 1328·2019-08-29 18:43
閱讀 2205·2019-08-29 13:26