前端上传文件到服务器端

上传文件到服务器有很多插件，而且各种UI组件库,像iview,eleUI也都替我们封装好了，根本不用我们操心。
下面是原生的form 上传
原生form表单上传文件
直接上代码

<form enctype=’multipart/form-data’ action=”http://192.168。xxx.xxx:3000/upload” method=”post”>
<input type=”file” name=’pic’>
<input type=”submit”>
</form >

首先我们看form的enctype 属性
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为 “application/x-www-form-urlencoded”。就是说，在发送到服务器之前，所有字符都会进行编码，但是在这里上传文件，我们用multipart/form-data，通过二进制方式提交。

action是你上传文件的地址路径，method是以什么方式进行处理，post为上传，get为获取。
前端很简单，重要的是后端，博主用node起了一个服务器，废话不说，上代码

var multiparty = require(‘multiparty’)

router.post(‘/upload’,function (req,res) {
//创建处理form表单的对象
var form = new multiparty.Form({
uploadDir: ‘./images’
})//文件上传的路径
//通过form.parse生成服务器文件，注意这里生成的文件名字不是原来的名字，而是编码后的名字,里面的回调包含错误信息，字段信息，文件信息
form.parse(req,function (err,fields,files) {
if(err) {throw err ;
console.log(err)}
else{
res.send(JSON.stringify(files.pic[0]))
}
})
})

这里需要安装插件multiparty
执行命令npm i multiparty
作用：使用内容类型解析http请求multipart/form-data，也称为文件上载。