elementUi + express 上传图片
程序员文章站
2022-09-09 15:13:34
使用插件 formidable > npm i formidable 后台代码 import formidable from 'formidable' 输出结果: 图片存储地方: Node.js的Formidable模块的使用 1) 创建Formidable.IncomingForm对象 var f ......
// 前端代码
<el-upload drag action="http://localhost:4001/article/uploadcoverimage" multiple list-type="picture" class="image-uploader">
<i class="el-icon-upload" />
<div class="el-upload_text"><em>上传封面图</em></div>
</el-upload>
使用插件 formidable -----> npm i formidable
后台代码
import formidable from 'formidable'
uploadcoverimage(req, res, next) {
let form = new formidable.incomingform()
form.encoding = 'utf-8' // 编码
form.keepextensions = true // 保留扩展名
form.uploaddir = path.join(__dirname, '../../public/images/')
form.parse(req, (err, fields, files) => {
if (err) return next(err)
console.log(fields) //object 表单数据
console.log(files) //上传文件用files.<name>访问
res.json({
code: 1,
message: 'upload success'
})
})
}
输出结果:
图片存储地方:
node.js的formidable模块的使用
1) 创建formidable.incomingform对象 var form = new formidable.incomingform() 2) form.encoding = ‘utf-8‘ 设置表单域的编码 3) form.uploaddir = "/my/dir"; 设置上传文件存放的文件夹,默认为
系统的临时文件夹,可以使用fs.rename()来改变上传文件的存放位置和文件名 4) form.keepextensions = false; 设置该属性为true可以使得上传的文件保持原来的文件的扩展名。 5) form.type 只读,根据请求的类型,取值‘multipart‘ or ‘urlencoded‘ 6) form.maxfieldssize = 2 * 1024 * 1024; 限制所有存储表单字段域的大
小(除去file字段),如果超出,则会触发error事件,默认为2m 7) form.maxfields = 1000 设置可以转换多少查询字符串,默认为1000 8) form.hash = false; 设置上传文件的检验码,可以有两个取值‘sha1‘ or ‘md5‘. 9) form.multiples = false;
开启该功能,当调用form.parse()方法时,回调函数
的files参数将会是一个file数组,数组每一个成员是一个file对
象,此功能需要 html5中multiple特性支持。 10) form.bytesreceived 返回服务器已经接收到当前表单数据多少字节 11) form.bytesexpected 返回将要接收到当前表单所有数据的大小 12) form.parse(request, [callback])
该方法会转换请求中所包含的表单数据,callback会
包含所有字段域和文件信息,如: form.parse(req, function(err, fields, files) { // ... }); 13) form.onpart(part); 你可以重载处理multipart流的方法,这样做的话会禁止field和
file事件的发生,你将不得不自己处理这些事情,如: form.onpart = function(part) { part.addlistener(‘data‘, function() { // ... }); } 如果你只想让formdable处理一部分事情,你可以这样做: form.onpart = function(part) { if (!part.filename) { // 让formidable处理所有非文件部分 form.handlepart(part); } } 14) formidable.file对象 a. file.size = 0
上传文件的大小,如果文件正在上传,表示已上传部分的大小 b. file.path = null
上传文件的路径。如果不想让formidable产生一个临时
文件夹,可以在filebegain事件中修改路径 c. file.name = null 上传文件的名字 d. file.type = null 上传文件的mime类型 e. file.lastmodifieddate = null 时间对象,上传文件最近一次被修改的时间 f. file.hash = null 返回文件的hash值 g. 可以使用json.stringify(file.tojson())来格式化输出文件的信息 15) form.on(‘progress‘, function(bytesreceived, bytesexpected) {});
当有数据块被处理之后会触发该事件,对于创建进度条非常有用。 16) form.on(‘field‘, function(name, value) {});
每当一个字段/值对已经收到时会触发该事件 17) form.on(‘filebegin‘, function(name, file) {});
在post流中检测到任意一个新的文件便会触发该事件 18) form.on(‘file‘, function(name, file) {});
每当有一对字段/文件已经接收到,便会触发该事件 19) form.on(‘error‘, function(err) {});
当上传流中出现错误便会触发该事件,当出现错误时,若想要继续触发request的
data事件,则必须手动调用request.resume()方法 20) form.on(‘aborted‘, function() {});
当用户中止请求时会触发该事件,socket中的timeout和close事件也会触发该事
件,当该事件触发之后,error事件也会触发 21) form.on(‘end‘, function() {});
当所有的请求已经接收到,并且所有的文件都已上传到服务器中,
该事件会触发。此时可以发送请求到客户端
------------------------ 引用 http://www.mamicode.com/info-detail-1676091.html
上一篇: 身为一国之君的胡亥为何会以平民身份下葬?
下一篇: 协助自杀