成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前端ajax上傳文件，圖片，后端nodejs接收文件；

vincent_xyb / 743人閱讀

摘要：前端上傳文件，圖片，后端接收文件學習了，就想實現(xiàn)一下有進度條的文件上傳，在做這個功能的時候遇到的問題用普通的無法實現(xiàn)文件上傳，只能，，一些，字符串想要上傳文件或者圖片，可以添加上傳注意需要在上添加標示缺點，這樣會倒置頁面的刷新很糟糕有沒有

前端ajax上傳文件，圖片，后端nodejs接收文件； 
學習了nodejs，就想實現(xiàn)一下有進度條的文件上傳，


在做這個功能的時候遇到的問題

用普通的ajax無法實現(xiàn)文件上傳，只能post，get，一些json，string字符串；

想要上傳文件或者圖片，可以添加form上傳；注意需要在form上添加 標示 enctype="multipart/form-data"

缺點，這樣會倒置頁面的刷新；很糟糕有沒有

還可以在頁面中添加一個ifame,將表單提交到ifame中，不過，一聽說有iframe就有點糟心有沒有；

于是就有了下面的東西；
請自動忽略沒有樣式(只是為了實現(xiàn)功能)這個梗，啊哈哈；

好了廢話少說直接上代碼

前端部分代碼 



    
    Document
用到了 FormData 類； 
使用方法

通過new FormData 創(chuàng)建一個form提交實例對象；此對象會有append方法，

用法 oMyform.append(name,value) name是一個字段，value是對應的值(可以是字符串，數(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模塊
主要代碼邏輯 
/**
 * [導出一個中間件，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)中有異步邏輯，導致異步邏輯出現(xiàn)問題；

formidable 的上傳文件路徑用相對路徑會找不到所指定的路徑

解決辦法

可以用閉包實現(xiàn)，每次傳進到閉包的變量不會受到外界的影響；

用牛逼的__dirname 變量；指向當前文件的絕對路徑；

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/80369.html

相關(guān)文章

  • 一步一步搭建一個圖片上傳網(wǎng)站（后臺服務(wù)器用nodejs）

    摘要：把文件上傳路徑指定到然后用當前日期和文件名命名上傳過來的文件。后端利用建立服務(wù)器，利用中間件指定文件路徑。利用這個前端和后端技術(shù)，我們基本上就可以做出一個圖片上傳存儲的基本網(wǎng)站核心。 前幾天看了騰訊云社區(qū)的一個文件上傳的文章文件上傳那些事兒，大體上講了以下h5中圖片上傳的幾個核心原理，但是沒有后端接受的服務(wù)器代碼，沒法做測試。也沒有具體的一個實例都是一些基本的原理片段，并且ui界面也不...

    Darkgel 評論0 收藏0

  • nodejs express圖片上傳前后端配置講解

    摘要：默認地，表單數(shù)據(jù)會編碼為。就是說，在發(fā)送到服務(wù)器之前，所有字符都會進行編碼空格轉(zhuǎn)換為加號，特殊符號轉(zhuǎn)換為值。提交說明文件上傳。圖片選擇圖片地址上傳上傳。用表單直接構(gòu)造對象就不需要下面的方法來為表單進行賦值了。 nodejs圖片上傳 nodejs一般開發(fā)網(wǎng)站基本都用express框架，本文也主要以express為例，講解如何上傳圖片；express本身沒有上傳圖片功能；一般都是集成相應的...

    tuniutech 評論0 收藏0

  • vuejs使用FormData，ajax上傳圖片文件

    摘要：我相信很多使用的朋友，都有采用上傳圖片的需求，因為前后端分離后，我們希望都能用來解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會導致提交成功后頁面跳轉(zhuǎn)，而使用能夠無刷新上傳圖片等文件。 我相信很多使用vuejs的朋友，都有采用ajax上傳圖片的需求，因為前后端分離后，我們希望都能用ajax來解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會導致提交成功后頁面跳轉(zhuǎn)，而使用ajax能夠無刷新上傳圖片等文件。其實已經(jīng)有朋友封裝了...

    zollero 評論0 收藏0

  • 淺析前端上傳

    摘要：項目上也用到很多上傳文件的地方，七牛云，阿里云，訊飛上傳都接觸過，所以在這里做一個記錄，總結(jié)一下前端上傳的幾種方式。類型的文件名七牛云上傳淺析是一個基于七牛開發(fā)的前端。 showImg(https://segmentfault.com/img/bVbvibu?w=1920&h=1080); 圖片，音頻，視頻等等這幾種常見的資源類型，如果需要從前端上傳到服務(wù)端，有幾種方式呢？不妨回顧一下...

    terro 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<