elementUi + express 上传图片

2019-04-12 09:27:19来源：博客园阅读 ()

// 前端代码

<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