Vue+ElementUI+NodeJs图片上传

一、将图片上传到服务器

1、添加图片上传框

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


  
    
    
  

其中:

  • 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属性上。


  

你可能感兴趣的:(Vue+ElementUI+NodeJs图片上传)