上传文件到服务器有很多插件,而且各种UI组件库,像iview,eleUI也都替我们封装好了,根本不用我们操心。
下面是原生的form 上传
原生form表单上传文件
直接上代码
<form enctype='multipart/form-data' action="http://192.168。:3000/upload" method="post">
<input type="file" name='pic'>
<input type="submit">
</form >
首先我们看form的enctype 属性
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就是说,在发送到服务器之前,所有字符都会进行编码,但是在这里上传文件,我们用multipart/form-data,通过二进制方式提交。
详细请戳这里
http:///tags/att_form_enctype.asp
action是你上传文件的地址路径,method是以什么方式进行处理,post为上传,get为获取。
前端很简单,重要的是后端,博主用node起了一个服务器,废话不说,上代码
var multiparty = require('multiparty')
('/upload',function (req,res) {
//创建处理form表单的对象
var form = new ({
uploadDir: './images'
})//文件上传的路径
//通过生成服务器文件,注意这里生成的文件名字不是原来的名字,而是编码后的名字,里面的回调包含错误信息,字段信息,文件信息
(req,function (err,fields,files) {
if(err) {throw err ;
(err)}
else{
(([0]))
}
})
})
这里需要安装插件multiparty
执行命令npm i multiparty
作用:使用内容类型解析http请求multipart/form-data,也称为文件上载。
详情请戳/package/multiparty