欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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'
      })
    })
  }

 输出结果:

 elementUi + express 上传图片

图片存储地方:

elementUi + express 上传图片

 

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