Vue3 文件上传增加对文件的描述字段 el-upload

实现效果：因为文件上传使用的是element 的upload组件，现在甲方要求对每个文件要有对应的描述，一个方法是修改element组件的源码，比较繁琐，因此自定义一个fileList的数组，用于已上传文件的列表展示，将el-upload组件的文件列表进行隐藏，以此达到为文件添加描述的效果。

html部分：

首先使用ul，li进行fileList的for循环，进行文件展示，可在此处自定义想要的展示效果。

之后为el-upload组件设置:show-file-list="false"，隐藏其文件列表

<template>
  <el-button @click="tanchaung">按钮</el-button>
  <el-dialog v-model="tcxianshi" width="60%">
    <el-form :model="formState" ref="ruleFormRef1" :rules="rules">
      <el-form-item label="文件:" label-width="100px" prop="laplTime">
        <div class="fileFormItem">
          <ul class="fileListUl">
            <li class="fileListLi" v-for="item in fileList" :key="item.url">
              <div class="fileNameDiv" @click="handlePreview(item)">
                <img src="../assets/icon/file.svg" style="width: 1em; height: 1em;">
                {{ item.name }}
              </div>
              <div class="fileDesDiv">
                <span class="fileDesSpan">文件描述:</span>
                <el-input
                  class="input11"
                  v-model="item.descript"
                ></el-input>
              </div>
              <div class="deleteIcon" @click="deleteFile(item)">
                删除
              </div>
            </li>
          </ul>
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="handleSuccess"
            :limit="3"
            :on-exceed="handleExceed"
            :show-file-list="false"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                <!-- jpg/png files with a size less than 500KB. -->
              </div>
            </template>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

js部分：

// 数据定义
let data = reactive({
  formState: {}, // 表单状态数据
});

// 引用定义
const ruleFormRef1 = ref(); // 表单引用
let tcxianshi = ref(false); // 控制对话框显示状态

// 方法定义
function tanchaung() {
  tcxianshi.value = true; // 显示对话框
}

// 文件列表数据定义
const fileList = ref([
  {
    name: "element-plus-logo.svg",
    url: "https://element-plus.org/images/element-plus-logo.svg",
    descript: "", // 文件描述
  },
  {
    name: "element-plus-logo2.svg",
    url: "https://element-plus.org/images/element-plus-logo.svg",
    descript: "", // 文件描述
  },
]);

// 表单校验规则定义
const rules = reactive({
  planName: [{ required: true, message: "请输入计划名", trigger: "blur" }],
});

// 删除文件方法
function deleteFile(val){
  console.log('当前删除文件', val);
  console.log('当前存在文件', fileList.value);
  var length = fileList.value.length;
    for (var i = 0; i < length; i++) {
        if (fileList.value[i].uid == val.uid) {
          fileList.value.splice(i, 1); //删除下标为i的元素
          return fileList.value;
        }
    }
    console.log('当前存在文件', fileList.value);
};

// 处理文件删除事件
const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles);
  console.log("handleRemove  fileList已有文件", fileList.value);
};

// 处理文件预览事件
const handlePreview = (uploadFile) => {
  console.log(uploadFile);
  console.log("handlePreview  fileList已有文件", fileList.value);
};

// 处理文件超出限制事件
const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};

// 文件删除前的确认操作
const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `确认删除 ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  );
};

// 文件上传成功后的处理
const handleSuccess = (file, uploadFiles) => {
  console.log("上传成功 ", file, uploadFiles);
  console.log("handleSuccess  fileList已有文件", fileList.value);
  ElMessage({
    message: '上传成功',
    type: 'success',
  })
  fileList.value[fileList.value.length - 1].descript = "";
};

// 解构获取响应式数据
let { formState } = toRefs(data);