表格里多个图片上传

需求如上图：多个图片上传，我用的是element-ui自带的上传组件<el-upload></el-upload>

<el-upload
  v-if="$route.params.mode === 'add'"
  class="upload-demo"
  :limit="1"
  :on-exceed="handleExceed"
  :on-preview="handlePreview"
  :data="uploadParams(subItem)"
  :action="uploadUrl()"
  :on-remove="function(file, fileList){ return handleRemove(file, fileList, subItem) }"
  :on-success="function(res, file, fileList){ return handleSuccess(res, file, fileList, subItem) }"
>
   <el-button size="small" type="text">点击上传</el-button>
</el-upload>

computed: {
  uploadParams() {
    return subItem => {
      let params = {
        weiyibianhao: this.shipCode,
        questionNo: subItem.questionNo
      };
      return params;
    };
  }
},        

  // 上传相关
  uploadUrl() {
      return '/sdkseaunion/inspectApi/uploadQuestionImage';
  },
  handleExceed(files, fileList) {
      this.$message.warning('只能上传一张图片');
  },
  handlePreview(file) {
      this.picUrl = file.response.data.fileUrl;
      this.isPicView = true;
  },
  beforeAvatarUpload(file) {
     const isJPG = file.type === 'image/jpeg';
     const isPNG = file.type === 'image/png';
     const isLt5M = file.size / 1024 / 1024 < 5;
     if (!isJPG || !isPNG) {
         this.$message.error('上传头像图片只能是jpg格式或者png格式!');
     }
     if (!isLt5M) {
         this.$message.error('上传头像图片大小不能超过 5MB!');
     }
     return isJPG && isLt5M;
  },
  handleRemove(file, fileList, subItem) {
     $http.post('/sdkseaunion/inspectApi/delQuestionImage', {
        weiyibianhao: this.shipCode,
        questionNo: subItem.questionNo
     }).then(rspData => {
        this.$message({
           type: 'success',
           message: '删除成功!'
        });
     });
  },
  handleSuccess(res, file, fileList, subItem) {
     // console.log('上传成功');
 },

图片预览html：

<!-- 图片预览 -->
<div class="model-wrapper" v-if="isPicView">
   <div class="model">
      <img :src="picUrl" />
      <i class="icon-close" @click="isPicView = false"></i>
   </div>
   <div class="mask"></div>
8 </div>

图片预览css：

/* 模态弹窗 */
.model-wrapper {
    .model {
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 10;
         1200px;
        height: 740px;
        background: #000;
        transform: translate(-50%, -50%);
        box-shadow: 0 12px 24px 0 rgba(28, 31, 33, 0.1);
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
        display: flex;
        align-items: center;
        img {
             1200px;
            height: 740px;
            object-fit: contain;
        }
        .icon-close {
            display: block;
            position: absolute;
            right: 4px;
            top: 7px;
             40px;
            height: 40px;
            background: url('../../assets/images/icon-close.png') no-repeat left top;
            background-size: 100%;
        }
    }
    .mask {
        position: fixed;
        left: 0;
        top: 0;
         100%;
        height: 100%;
        opacity: 0.6;
        z-index: 1;
        background: #000;
    }
}

https://blog.csdn.net/weixin_34396103/article/details/94239372?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase