上传图片 vue 基于 Element UI

代码如下

<template>
  <div>
    <el-button
      type="primary"
      icon="el-icon-upload2"
      size="mini"
      @click="handleSwitch"
      >快速上传</el-button
    >
    <el-dialog
      title="材料快速上传"
      width="85%"
      :visible.sync="dialogVisible"
      v-dialogDrag
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="big_box">
        <div class="small_box">
          <el-divider content-position="left">待编辑材料</el-divider>
          <div class="check_box">
            <div class="button_box">
              <el-upload
                ref="uploadFile"
                class="upload-demo"
                :action="action"
                multiple
                :on-success="successList"
                :before-upload="onBeforeUpload"
                :headers="uploadHeader"
                :show-file-list="false"
                :file-list="fileList"
              >
                <el-button type="primary" icon="el-icon-upload2" size="mini"
                  >本地上传</el-button
                >
              </el-upload>
              <el-button
                style="margin-left: 10px"
                type="warning"
                icon="el-icon-edit"
                size="mini"
                :disabled="imageArr.length === 0"
                @click="handleEditAll"
                >编辑</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                :disabled="imageArr.length === 0"
                @click="handleDetailAll"
                >删除</el-button
              >
            </div>
            <div class="input_box">
              <input
                type="checkbox"
                v-model="isChecked"
                :disabled="imageList.length === 0"
                @click="allChecked"
              />全选
            </div>
          </div>
          <ul class="img_box">
            <li class="cloudy" v-for="(item, index) in imageList" :key="index">
              <input
                type="checkbox"
                :id="`checkbox${item.fileResourceId}`"
                name="checkbox"
                :checked="item.checked"
                @click="btnPitch($event, item)"
              />
              <label :for="`checkbox${item.fileResourceId}`">
                <img :src="item.fileUrl" alt="" />
                <div>{
  { item.fileName }}</div>
              </label>
            </li>
          </ul>
        </div>
        <div class="small_box">
          <el-divider content-position="left">已编辑材料</el-divider>
          <el-button
            type="primary"
            size="mini"
            :disabled="new_imageArr.length === 0"
            @click="handleKeep"
            >保存</el-button
          >
          <el-button
            size="mini"