前端ajax上传文件，图片，后端nodejs接收文件；

vincent_xyb 发布于2019-08-20 11:03 / 670人阅读

摘要：前端上传文件，图片，后端接收文件学习了，就想实现一下有进度条的文件上传，在做这个功能的时候遇到的问题用普通的无法实现文件上传，只能，，一些，字符串想要上传文件或者图片，可以添加上传注意需要在上添加标示缺点，这样会倒置页面的刷新很糟糕有没有

前端ajax上传文件，图片，后端nodejs接收文件；

学习了nodejs，就想实现一下有进度条的文件上传，

在做这个功能的时候遇到的问题

用普通的ajax无法实现文件上传，只能post，get，一些json，string字符串；

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

缺点，这样会倒置页面的刷新；很糟糕有没有

还可以在页面中添加一个ifame,将表单提交到ifame中，不过，一听说有iframe就有点糟心有没有；

于是就有了下面的东西；
请自动忽略没有样式(只是为了实现功能)这个梗，啊哈哈；

好了废话少说直接上代码

前端部分代码




    
    Document

用到了 FormData 类；

使用方法

通过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 变量；指向当前文件的绝对路径；

云服务器 GPU云服务器 nodejs文件上传 ajax上传文件 ajax文件上传 ajax实现文件上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80369.html

一步一步搭建一个图片上传网站（后台服务器用nodejs）

摘要：把文件上传路径指定到然后用当前日期和文件名命名上传过来的文件。后端利用建立服务器，利用中间件指定文件路径。利用这个前端和后端技术，我们基本上就可以做出一个图片上传存储的基本网站核心。前几天看了腾讯云社区的一个文件上传的文章文件上传那些事儿，大体上讲了以下h5中图片上传的几个核心原理，但是没有后端接受的服务器代码，没法做测试。也没有具体的一个实例都是一些基本的原理片段，并且ui界面也不...

Darkgel 2019-08-20 16:21 评论0 收藏0
nodejs express图片上传前后端配置讲解

摘要：默认地，表单数据会编码为。就是说，在发送到服务器之前，所有字符都会进行编码空格转换为加号，特殊符号转换为值。提交说明文件上传。图片选择图片地址上传上传。用表单直接构造对象就不需要下面的方法来为表单进行赋值了。 nodejs图片上传 nodejs一般开发网站基本都用express框架，本文也主要以express为例，讲解如何上传图片；express本身没有上传图片功能；一般都是集成相应的...

tuniutech 2019-08-19 18:30 评论0 收藏0
vuejs使用FormData，ajax上传图片文件

摘要：我相信很多使用的朋友，都有采用上传图片的需求，因为前后端分离后，我们希望都能用来解决数据问题，传统的表单提交会导致提交成功后页面跳转，而使用能够无刷新上传图片等文件。我相信很多使用vuejs的朋友，都有采用ajax上传图片的需求，因为前后端分离后，我们希望都能用ajax来解决数据问题，传统的表单提交会导致提交成功后页面跳转，而使用ajax能够无刷新上传图片等文件。其实已经有朋友封装了...

zollero 2019-08-20 18:34 评论0 收藏0
浅析前端上传

摘要：项目上也用到很多上传文件的地方，七牛云，阿里云，讯飞上传都接触过，所以在这里做一个记录，总结一下前端上传的几种方式。类型的文件名七牛云上传浅析是一个基于七牛开发的前端。 showImg(https://segmentfault.com/img/bVbvibu?w=1920&h=1080); 图片，音频，视频等等这几种常见的资源类型，如果需要从前端上传到服务端，有几种方式呢？不妨回顾一下...

terro 2019-08-26 10:13 评论0 收藏0