1.用element添加图片上传框

<el-upload
  action="/addtalk/upload" enctype="multipart/form-data" method="post"
  list-type="picture-card"
   :on-success="afterUpload"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove" class="iconbig">
  <i class="el-icon-camera-solid"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

data(){
            return{
              // 图片上传组件
              dialogImageUrl: '',
              dialogVisible: false,
              //文字编辑
              personalData: {
              desc: ''
              },
              rules: {
                 desc: [
                         { min: 0, max: 500,required: true, message: '', trigger: 'blur' }
                       ]
              }
            }
        },

methods:{
 //文件上传方法
             handleRemove(file, fileList) {
                   console.log(file, fileList);
                 },
             handlePictureCardPreview(file) {
                   this.dialogImageUrl = file.url;
                   this.dialogVisible = true;
      },
}

如图效果

注意：

action：图片上传到服务器api接口；
on-success：文件上传成功时的事件
on-remove: 文件列表移除文件时的事件

2.添加服务器接口

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

在app.js里填入以下代码

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

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

//上传图片必备中间件及文件夹
const multer = require('multer')
const upload = multer({dest: __dirname + '../uploads'})


router.post('/upload',upload.single('file'),  (req, res) => {
    const file = req.file
    file.url = `http://localhost:3001/server/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。