egg文件上传

egg文件上传

1.先在 config 文件中启用 file 模式

// config/config.default.js
config.multipart = {
 mode: 'file',
};

现在前端发的不是字段，而是大量的二进制数据。

（multipart在前端的表单出现过）

后端开启文件解析模式

2.前端提交文件

文件常常用post请求，因为post才可以携带大量的参数

当表单提交文件时，要注意加上 enctype=“multipart/form-data”，把文件打包成二进制数据交到后端

3.后端接收前端传来的文件

1.核心代码：const dest = ‘/public/upload/’;

2.用ctx.request.files接收到前端的数据（this.ctx.body接收字段），是一个数组，每一个文件都是数组中的一个对象。

其中field属性的值为表单的name属性；

filename为文件的原名称；

filepath属性为文件的路径，在一个缓冲区里，windows系统会定时清理，所以需要取出来。

4.文件上传

移动路径

除了课上的方法还可以用fs模块的rename方法，（记得引入）

传递三个参数，第一个参数：oldpath-需要移动的文件的原路径，

第二个参数：newpath–新路径，可以用“_dirname+"/…/public/upload"+this.ctx.request.files[0].filename”作为新路径，

第三个参数：移动成功的回调函数。

这样，就可以将文件上传到服务器了。

关于文件的存放

后端就会把数据存入数据库，记住图片最好不要传到数据库，数据库常常存的是字段。

对于图片采取的方式是，把图片放入文件操作系统（磁盘中的文件），把图片所在的路径作为字段放入数据库。

用户需要时，直接把路径传给用户。

layUI文件上传

采用模块 layui.upload。

以往文件上传的方式,但不能很好的与其它表单元素并存；

现在layUI做一个业务层面的“异步上传”，即先让图片上传，再和其它表单一起提交保存。

  上传图片

 

使用upload模块必须使用upload.render(options) 方法，方法的主要参数有：

参数选项 说明 类型 默认值
elem 指向容器选择器，如：elem: ‘#id’。也可以是DOM对象 string/object -
url 服务端上传接口，，用来告诉 upload 模块的服务端上传接口。像平时使用axios一样。 string -
accept 指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频） string images
done 执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）。详见下文 function -
error 执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）。详见下文 function -

该接口URL的返回response必须写成标准的 JSON 格式：

{
  "code": 0
  ,"msg": ""
  ,"data": {
    "src": "http://cdn.layui.com/123.jpg"
  }
}