使用Element-ui+vue+nodejs实现多图片上传和单图片上传

我的项目逻辑

一个提交信息的表单，里面包括上传图片功能，有普通的图片和一个banner图片，上传的图片会根据图片名将普通图片给img数组，将banner图片给 imgBanner变量

前端页面代码

 <el-upload
      class="upload-demo"
      action="http://localhost:8080/api/hold/imgload"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
       multiple
      :limit="5"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :on-success="uploadSuccess">
       <el-button size="small" type="primary">点击上传</el-button>
       <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
 </el-upload>

1. ** action=“http://localhost:8080/api/hold/imgload”** ，这是nodejs设计的API；
2. ** :limit=“5”** 文件限制上传5个；

前端data数据代码

data() {
	return {
		  fileList:[],//图片列表
		   form: {
                    num: 0,
                    title: '',
                    city:'',
                    exhibitionType: '',
                    extension: '',
                    businessHours:'',
                    location: '',
                    name: '',
                    number: '',
                    imgBanner: '',
                    img:[],
                    content: ''
                },
	     }
      }

前端方法代码

           //图片上传成功
            uploadSuccess(res, file) {
                //当上传的图片名为"banner.jpg"，则将图片路径赋给form.imgBanner，否则给form.img数组
                if(res.data.name === "banner.jpg") { //我的banner图名字都叫banner.jpg
                    this.form.imgBanner = res.data.path
                } else {
                    this.form.img.push(res.data.path)
                }
            },
            //删除图片时
            handleRemove(file, fileList) {
                console.log(file, fileList,'1111111');
                //删除图片时也要把form.imgBanner和form.img里的数据删除
                if(file.name === "banner.jpg") {
                    this.form.imgBanner = ''
                } else {
                    //给数组封装一个方法，用来删除数组中指定的数据
                    Array.prototype.contains = function(obj) {
                        var i = this.length;
                        while (i--) {
                            if (this[i] === obj) {
                                return i;  // 返回的这个 i 就是元素的索引下标，
                            }
                        }
                        return false;
                    }
                    const path = file.response.data.path
                    this.form.img.splice(this.form.img.contains(path),1)
                    // console.log(this.form.img,'删除后的form.img')
                }
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            }

nodejs代码

1.需要安装 multer 和 fs 包

npm i multer fs

2.引入包

const multer = require(‘multer’)
const fs = require(‘fs’)

//图片上传
router.post(
    "/api/hold/imgload",
    multer({
      //设置文件存储路径
      dest: "public/images",
    }).array("file", 1),
    function (req, res, next) {
      let files = req.files;
      let file = files[0];
      let fileInfo = {};
      let path = "public/images/" + Date.now().toString() + "_" + file.originalname;
      fs.renameSync("./public/images/" + file.filename, path);
      //获取文件基本信息
      fileInfo.type = file.mimetype;
      fileInfo.name = file.originalname;
      fileInfo.size = file.size;
      fileInfo.path = path;
      res.send({
        code: 200,
        msg: "OK",
        data: fileInfo,
      });
    }
)

这样，当你上传图片成功后，图片就保存到你nodejs项目中的public/images文件夹里了

最终展示

保存的数据为：前端拿到这些数据就可以渲染出来图片