formData实现图片上传

前言

　　在 上一篇 已经实现了图片预览，那么如何上传图片呢？有两种思路：

　　1、将图片转化为dataURL(base64)，这样就成为了一串字符串，再传到服务端。不过这样缺点很多，数据量比转换之前增加1/3，而且会增加了存储开销（如果存在数据库，就多了访问数据库；如果解析成图片再存储，就多了解析的开销）。所以这样方式不可取。

　　2、使用formData对象进行上传。

FormData对象

　　先看MDN上对FormData对象的介绍：模拟一系列表单控件,我们还可以使用异步上传一个二进制文件 。

　　构造formData

//1var formData = new FormData(formDOM);//2var formData = new FormData();formData.append(name , value , fileName)

　　在上篇的例子中，创建input的formData对象

var fileInput = document.querySelector('.input-file');var files = fileInput.filesvar formData = new FormData(); //创建formData对象//判断数据 若有 则添加数据if(files.length > 0){ [].slice.call(files).forEach(function(value,index){ formData.append('img' + index,value,value.name) //遍历添加数据 })}else { alert('请先选择图片'); return false;}

　　注意：查看formData对象数据需要用get()或者getAll()方法，直接打印出来是{}的。

　　弄好了formData对象，再

formidable = require('formidable'); //载入formidablevar express = require('express');var app = express();app.use(express.static('src',{ // 静态资源中间件 setHeaders : function(res,path,stat){ res.setHeader('Cache-Control', 'max-age=' + 6000); }}));app.post('/upload',function(req,res){ var form = new formidable.IncomingForm(); form.encoding = 'utf-8'; form.uploadDir = './src/images'; form.keepExtensions = true; form.parse(req,function(err,field,files){ console.log(files); }); res.send({ 'msg':'upload file' });});var server = app.listen(8081, function(){ console.log('服务器已启动!');});

上传

　1、原生上传

　　此时的 Content-Type应该为multipart/form-data，原生方式的时候不需要添加也可以，浏览器会自动完成。

  var httpDemo = new 'post','/upload',true); //初始化请求 post方式 接口 异步  httpDemo.onload = function(e){  console.log(e);  }   httpDemo.send(formData); //发送请求

　　查看效果，选择的图片已成功上传到指定的目录。

　2、$.ajax()

　使用jquery上传有两个配置需要注意：

　　processData会默认将data转化为字符串，所以需要配置为false，不进行处理。

　　contentType默认值为application/x-www-form-urlencoded; charset=UTF-8'。上传文件时，Content-Type应该为multipart/form-data。但是设置为multipart/form-data也还是会失败。只有设置为false才可以。

$.ajax({url : '/upload',type:'POST',data: formData,processData:false,contentType:false,success:function(data,textStatus,jqXHR){},error:function(jqXHR,textStatus,error){}})

　　查看效果，依旧可以上传成功。

　3、vue-axios上传

　　只需要配置header即可。

  headers: {   'Content-Type': 'multipart/form-data'  },

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：formData实现图片上传

关键词：上传