前言
在 上一篇 已经实现了图片预览，那么如何上传图片呢？有两种思路：
1、将图片转化为dataURL(base64)，这样就成为了一串字符串，再传到服务端。不过这样缺点很多，数据量比转换之前增加1/3，而且会增加了存储开销（如果存在数据库，就多了访问数据库；如果解析成图片再存储，就多了解析的开销）。所以这样方式不可取。
2、使用formData对象进行上传。
FormData对象
先看MDN上对FormData对象的介绍：XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件 。
构造formData
//
var formData = new FormData(formDOM); //
var formData = new FormData();
formData.append(name , value , fileName)
在上篇的例子中，创建input的formData对象
var fileInput = document.querySelector('.input-file');
var files = fileInput.files
var formData = new FormData(); //创建formData对象
//判断数据 若有 则添加数据
if(files.length > ){
[].slice.call(files).forEach(function(value,index){
formData.append('img' + index,value,value.name) //遍历添加数据
})
}else {
alert('请先选择图片');
return false;
}
注意：查看formData对象数据需要用get()或者getAll()方法，直接打印出来是{}的。
弄好了formData对象，再XMLHttpRequest提交到服务端，这里先写一个最简单的上传图片的接口。node小白，请不要吐槽这个粗糙到极致的接口，只是为了测试上传而已。
formidable = require('formidable'); //载入formidable
var 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 XMLHttpRequest(); //创建httprequest对象
httpDemo.open('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'
},