Vue+ElementUI+NodeJs图片上传

一、将图片上传到服务器

1、添加图片上传框

在Vue组件的表单中添加图片上传框

<el-form-item label="图标">
  <el-upload
    class="avatar-uploader"
    :action="$http.defaults.baseURL + '/upload'"
    :show-file-list="false"
    :on-success="afterUpload"
  >
    <img v-if="model.icon" :src="model.icon" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</el-form-item>

其中：

• action：图片上传到服务器api接口；
• show-file-list：是否显示已上传的文件列表；
• on-success：文件上传成功时的事件

2、添加服务器接口

(1)在服务器端建立uploads文件夹用来接受上传的文件，并将uploads文件夹托管为静态文件

app.use('/uploads', express.static(__dirname + '/uploads'))

(2)接收图片，并存放入uploads文件夹，然后返回图片的url地址，表单之后会将图片的url上传到服务器。

const multer = require('multer')
const upload = multer({dest: __dirname + '/../../uploads'})
app.post('/admin/api/upload',upload.single('file'), async (req, res) => {
  const file = req.file
  file.url = `http://localhost:3000/uploads/${file.filename}`
  res.send(file)
})

其中：

multer是express官方推荐的文件上传中间件，它是在busboy的基础上开发的。

1.文件上传有以下方法

• muilter.single(‘file’), //适用于单文件上传

• muilter.array(‘file’,num), //适用于多文件上传，num为最多上传个数，上传文件的数量可以小于num,

• muilter.fields(fields), //适用于混合上传，比如A类文件1个，B类文件2个。官方API有详细说明。

2.file为上传字段名称，当使用form表单submit方式上传时，必须与表单上传的name属性保持一致。 表单记得加上 enctype=‘multipart/form-data’

3.对上传文件大小限制，名称限制等均可在limits中加上，具体可加属性，请参考官方api。

3、输入框显示上传的图片

使用on-success钩子函数来处理服务器返回的数据，当上传成功时在图片上传框中显示上传的图片。

afterUpload(res) {
  // 明确告诉vue赋值 model.icon = res.url
  this.$set(this.model, 'icon', res.url)
  // this.model.icon = res.url
},

注意：若使用this.model.icon = res.url赋值的话，图片上传成功后不会在上传框中显示。

二、在前端表格显示图片

在需要显示图片的Vue组件中，先请求服务器api接口，然后将图片的url绑定到img标签的src属性上。

<el-table-column prop="icon" label="图标">
  <template slot-scope="scope">
    <img :src="scope.row.icon" style="height: 3rem">
  </template>
</el-table-column>