前端上传文件到服务器端

时间:2024-11-08 08:00:04

上传文件到服务器有很多插件,而且各种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