element-ui 多张图上传

<template>
  <div class="main-wrapper">
    <el-col :span="12">
      <el-upload
        v-if="collectData.isCustom==1"
        class="upload-demo"
        :action="uploadUrl"
        :headers="tokenObj"
        :limit="5"
        :on-success="handleSuccess"
        :on-exceed="handleExceed"
        :on-remove="removePic"
        :file-list="fileList"
        list-type="picture"
        style="position: relative;"
        name="upfile"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，建议分辨率800*300</div>
      </el-upload>
      <div v-if="collectData.isCustom==0">
        <img v-for="(item, index) of collectData.system" :key="index" :src="item.value" alt />
      </div>
      <div v-if="collectData.isCustom==2">
        <img
          v-for="(item, index) of collectData.screenDefault"
          :key="index"
          class="img-sty"
          :src="item.value"
          alt
        />
      </div>
      <!-- 图片标题自定义input -->
      <div v-if="collectData.isCustom==1" class="img-input-wrap">
        <div v-for="(item,index) in collectData.custom" :key="index" class="img-input-box">
          <label>图片标题</label>
          <input
            v-model="item.appellation"
            type="text"
            :disabled="collectData.isCustom!=1"
            placeholder="请输入标题"
          />
        </div>
      </div>

      <div v-if="collectData.isCustom==2" class="img-input-wrap">
        <div v-for="(item,index) in collectData.screenDefault" :key="index" class="img-input-box">
          <label>图片标题</label>
          <input
            v-model="item.appellation"
            type="text"
            :disabled="collectData.isCustom!=1"
            placeholder="请输入标题"
          />
        </div>
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      default: () => {
        return {};
      },
      type: Object
    }
  },
  data() {
    return {
      collectData: "",
      fileList: [],
      formShow: false,
      uploadUrl: "",
      tokenObj: { "author-token-key": localStorage.getItem("token") },
      imgInputList: [
        {
          appellation: ""
        },
        {
          appellation: ""
        },
        {
          appellation: ""
        }
      ]
    };
  },
  created() {
    this.collectData = this.data;
    console.log(this.collectData);
    // this.uploadUrl = process.env.IMAGE_API + "upload?project=micropark";
    this.uploadUrl = process.env.IMAGE_API + "syscore/file/uploadImage";
    if (this.collectData.custom == []) {
      this.fileList = [];
    } else {
      for (const item of this.collectData.custom) {
        this.fileList.push({
          name: "轮播图",
          url: item.value
        });
      }
    }
  },
  methods: {
    handleSuccess(response) {
      this.collectData.custom.push({
        appellation: "",
        // value: process.env.IMAGE_API + "stream/micropark/" + response.ObjectId
        value: response.url
      });
    },
    removePic(file, fileList) {
      // console.log("file", file);
      if (file.response) {
        const returenUrl =
          process.env.IMAGE_API + "stream/micropark/" + file.response.ObjectId;
        this.collectData.custom = this.collectData.custom.filter(item => {
          return item.value != returenUrl;
        });
      } else {
        this.collectData.custom = this.collectData.custom.filter(item => {
          // console.log("item", item);
          return item.value != file.url;
        });
      }
    },
    handleExceed() {
      this.$message({
        message: "最多只能上传五张图片，请先删除一张图片再上传！",
        type: "warning"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.main-wrapper {
  display: flex;
   100%;
  overflow-x: auto;
  .bg_img {
     284px;
    height: 216px;
  }
  .img-sty {
    margin-top: 40px;
     40%;
    display: block;
  }
  .img-input-wrap {
    position: absolute;
    top: 112px;
    left: 55%;
     50%;
    height: auto;
    .img-input-box {
      overflow: hidden;
      z-index: 0;
      background-color: #fff;
      border-radius: 6px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin-top: 10px;
      height: 92px;
      line-height: 92px;
      label {
        margin-right: 20px;
        color: #606266;
      }
      input {
        height: 30px;
        line-height: 30px;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        padding-left: 4px;
        outline: none;
      }
    }
  }
}
</style>

多个list

<!-- 企业事迹组件页面 -->
<template>
  <div class="main-wrapper">
    <!-- <el-col :span="12"> -->
    <el-button type="primary" v-if="collectData.isCustom == 1" @click="addEnter">新增事迹</el-button>
    <el-col :span="24" class="collectDataBox-ruian-wrap" v-if="collectData.isCustom !== 0">
      <!-- 企业事迹 -->
      <div class="collectDataBox-ruian" v-for="(item,index) in collectData.custom" :key="index">
        <div class="collectDataBox-ruian-list">
          <span>企业事迹</span>
          <el-input
            type="text"
            class="ruian-input"
            placeholder="请输入事迹"
            v-model="item.secField"
            :disabled="collectData.isCustom!=1"
          />
        </div>
        <div class="collectDataBox-ruian-list">
          <span>企业名称</span>
          <el-input
            type="text"
            class="ruian-input"
            placeholder="请输入名称"
            v-model="item.appellation"
            :disabled="collectData.isCustom!=1"
          />
        </div>
        <div class="collectDataBox-ruian-list">
          <span>文件上传</span>
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :headers="tokenObj"
            :limit="3"
            :on-success="(response, file, fileList)=>handleSuccess(response, file, fileList, index)"
            :on-exceed="handleExceed"
            :on-remove="(response, file, fileList)=>removePic(file, fileList, index)"
            :file-list="item.fileList"
            name="upfile"
            :before-upload="beforeUploadFile"
            accept=".png, .jpge, .jpg, .mp4"
          >
            <el-button size="small" type="primary" :disabled="collectData.isCustom!=1">点击上传</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，建议分辨率800*300</div> -->
            <div slot="tip" class="el-upload__tip">可上传图片/视频文件，建议大小不超过40M</div>
          </el-upload>
          <!-- 图片标题自定义input -->
          <div v-if="collectData.isCustom==1" class="img-input-wrap">
            <div v-for="(itemsub,index) in item.dateValue" :key="index" class="img-input-box">
              <span>文件标题</span>
              <input
                v-model="itemsub.date"
                type="text"
                :disabled="collectData.isCustom!=1"
                placeholder="请输入标题"
              />
            </div>
          </div>
          <div v-if="collectData.isCustom==2" class="img-input-wrap">
            <div v-for="(itemsub,index) in item.dateValue" :key="index" class="img-input-box">
              <span>文件标题</span>
              <input
                v-model="itemsub.date"
                type="text"
                :disabled="collectData.isCustom!=1"
                placeholder="请输入标题"
              />
            </div>
          </div>
        </div>
        <div class="collectDataBox-ruian-list">
          <span>企业简介</span>
          <el-input
            type="textarea"
            placeholder="请输入简介"
            :rows="8"
            v-model="item.firField"
            :disabled="collectData.isCustom!=1"
          />
        </div>
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      default: () => {
        return {};
      },
      type: Object
    }
  },
  data() {
    return {
      collectData: "",
      fileList: [],
      formShow: false,
      uploadUrl: "", //上传地址
      tokenObj: { "author-token-key": localStorage.getItem("token") }
    };
  },
  created() {
    this.collectData = this.data;
    // console.log("headersObj", this.tokenObj);
    //上传地址
    // this.uploadUrl = process.env.IMAGE_API + "upload?project=micropark";
    this.uploadUrl = process.env.IMAGE_API + "syscore/file/uploadImage";

    for (let index in this.collectData.custom) {
      if (this.collectData.custom[index].dateValue) {
        this.collectData.custom[index].fileList = [];
        for (let item of this.collectData.custom[index].dateValue) {
          // console.log("item", item);
          this.collectData.custom[index].fileList.push({
            name: item.isImg ? "图片文件" : "视频文件",
            value: item.value
          });
        }
      } else {
        this.collectData.custom[i].fileList = [];
      }
    }
  },
  methods: {
    addEnter() {
      this.collectData.custom.push({
        appellation: "", //文件名称
        //文件地址
        dateValue: [],
        firField: "", //企业简介
        secField: "" //企业事迹
      });
    },
    handleSuccess(response, file, fileList, i) {
      // console.log("response", response);
      let data = this.collectData.custom;
      data[i].dateValue.push({
        date: "",
        // value: process.env.IMAGE_API + "stream/micropark/" + response.ObjectId
        value: response.url
      });
      // console.log("this.collectData.custom1111", this.collectData.custom);
    },
    removePic(file, fileList, index) {
      // console.log(index);
      // console.log(file);
      let dateValueResult = [];
      for (let item of file) {
        dateValueResult.push({
          date: item.name,
          value: item.value
        });
      }
      this.collectData.custom[index].dateValue = dateValueResult;
    },
    handleExceed() {
      this.$message({
        // message: "最多只能上传五张图片，请先删除一张图片再上传！",
        message: "最多只能上传三个文件，请先删除一个后再上传！",
        type: "warning"
      });
    },
    beforeUploadFile(file) {
      // console.log("file", file);
      let isLt40M = file.size / 1024 / 1024 < 40; //文件大小
      // console.log("file.size / 1024 / 1024", file.size / 1024 / 1024);
      if (!isLt40M) {
        this.$message.error("上传文件大小不能超过40MB!");
        return false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.main-wrapper {
  // display: flex;
   100%;
  .collectDataBox-ruian-wrap {
    height: 800px;
    padding: 20px;
    overflow-y: auto;
    .collectDataBox-ruian {
       100%;
      margin: 20px 0;
      // position: relative;
      border-bottom: 1px solid #ccc;
      .collectDataBox-ruian-list {
        margin: 10px 0;
        display: flex;
        position: relative;
        span {
           80px;
        }
        .ruian-input {
           300px;
        }
        .img-input-wrap {
          position: absolute;
          top: 75px;
          left: 55%;
           50%;
          height: auto;
          .img-input-box {
            overflow: hidden;
            z-index: 0;
            background-color: #fff;
            border-radius: 6px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin-top: 4px;
            height: 32px;
            line-height: 32px;
            label {
              margin-right: 20px;
              color: #606266;
            }
            input {
              height: 30px;
              line-height: 30px;
              border: 1px solid #c0ccda;
              border-radius: 6px;
              padding-left: 4px;
              outline: none;
            }
          }
        }
      }
    }
  }
}
</style>