直播app开发搭建，Vue Element UI Upload 上传多张图片

<template><br>  <div><br>    <el-card><br>      <h1>轮播图 - 图片上传管理</h1><br>      <el-divider></el-divider><br>      <!--注意：使用 :model="uploadImgForm" 不要使用 v-model="uploadImgForm"--><br>      <el-form ref="formRef" :model="uploadImgForm"><br>        <el-form-item label="" prop="productImg"><br>          <!-- action : 上传的地址 --><br>          <!-- on-preview： 点击图片时的回调 --><br>          <!-- on-remove： 删除图片后的回调 --><br>          <el-upload<br>            ref="upload"<br>            action="/smoke_product/xxxxxxxxxx<br>            :auto-upload="false"<br>            list-type="picture-card"<br>            :on-preview="handlePreview"<br>            :on-remove="handleRemove"<br>            :on-change="uploadImage"<br>            :file-list="showFiles"<br>          ><br>            <i></i><br>          </el-upload><br>          <!-- 预览图片 --><br>          <el-dialog :visible.sync="dialogVisible" size="tiny"><br>            <img width="100%" :src="dialogImageUrl" alt /><br>          </el-dialog><br>        </el-form-item><br>      </el-form><br>      <div><br>        <el-button type="primary" @click="submitForm()">上传</el-button><br>        <el-button @click="dialogFormVisible = false">取 消</el-button><br>      </div><br>    </el-card><br>  </div><br></template><br><script><br>import { uploadLoopImage } from "../../api/equipment";<br>export default {<br>  data() {<br>    return {<br>      dialogImageUrl: "",<br>      dialogVisible: false,<br>      uploadImgForm: {<br>        productImg: "",<br>      },<br>      file: [], // 上传图片时，改变存放改变列表里面的图片数组<br>      showFiles: [], // 存放图片的数组<br>      newFiles: [], // 存放最新图片的数组<br>    };<br>  },<br>  methods: {<br>    // 删除图片<br>    handleRemove(file, fileList) {<br>      console.log(file, fileList);<br>    },<br>    // 点击图片<br>    handlePreview(file) {<br>      // console.log("file", file);<br>      this.dialogImageUrl = file.url;<br>      this.dialogVisible = true;<br>    },<br>    // 上传图片<br>    uploadImage(file, fileList) {<br>      this.file = fileList; //主要用于接收存放所有的图片信息<br>      //限制上传文件为2M<br>      let sizeIsSatisfy = file.size < 2 * 1024 * 1024 ? true : false;<br>      if (sizeIsSatisfy) {<br>        return true;<br>      } else {<br>        this.fileSizeIsSatisfy = true;<br>        return false;<br>      }<br>    },<br>    //提交form表单<br>    submitForm() {<br>      this.$refs.formRef.validate((valid) => {<br>        if (valid) {<br>          if (this.file.length <= 0) {<br>            this.$message.error("请至少上传一个文件！");<br>            return;<br>          }<br>          if (this.fileSizeIsSatisfy) {<br>            this.$message.error("上传失败！存在文件大小超过2M！");<br>            return;<br>          }<br>          this.processFile(); //处理files的数据变成键值对的形式   返回newFiles这个数组<br>          console.log(this.newFiles);<br>          var param = new FormData(); // FormData 对象<br>          this.newFiles.forEach((fileItem) => {<br>            console.log(fileItem.imgFile);<br>            var list = fileItem;<br>            var file = list.imgFile;<br>            /**<br>             * 注意：<br>             *  "file" 这个名字一定要和 后台的一样<br>             */<br>            param.append("file", file); // 文件对象<br>          });<br>          // console.log(param)<br>          uploadLoopImage(param).then(<br>            (res) => {<br>              console.log(res); // 上传成功的 图片地址<br>            },<br>            (error) => {<br>              console.log(error);<br>            }<br>          );<br>        } else {<br>          console.log("error submit!!");<br>          return false;<br>        }<br>      });<br>    },<br>    //全部的图片添加到 newFiles中<br>    processFile() {<br>      this.file.forEach((item) => {<br>        let objFile = {};<br>        objFile.title = "file";<br>        objFile.imgFile = item.raw;<br>        this.newFiles.push(objFile);<br>      });<br>    },<br>  },<br>};<br></script><br><style scoped><br>.el-card {<br>  margin-top: 10px;<br>}<br>.el-form {<br>  margin-top: 10px;<br>}<br></style>