vue3+elementUI实现文件上传最终版本

效果图：

 页面代码：

        <el-form-item label="成果资料：" class="item" :disabled="fileDisable">
          <div class="uploadBox">
            <el-upload
              class="upload-demo"
              action="#"
              multiple
              :before-upload="uploadFile"
               :disabled="editDisable"
            >
              <el-button type="primary" class="upload">上传资料</el-button>
               <template #tip> 文件大小不能超过5M</template>
            </el-upload>
            
            <div class="uploadList">
              <ul class="uploadTitle">
                <li>文件名称</li>
                <li>文件类型</li>
                <li>操作</li>
              </ul>

              <ul v-for="(item, index) in files" :key="item.id" class="files">
                <li :title="item.file_name">{{ item.file_name }}</li>
                <li class="fileType">{{ item.file_type }}</li>
                <li class="fileAction">
                  <span @click="delFile(item.id, index)" v-show="!editDisable">删除 </span>
                  <span @click="showImg(item.file_url)" v-if="item.file_type=='图片'">  <span class="lineSpan" v-show="!editDisable"></span> 预览</span>
                </li>
              </ul>
            </div>
          </div>
        </el-form-item>

上传功能：

const uploadFile = (item) => {
  console.log('size',item.size)
  let formData = new FormData();
   const isLt3M = item.size / 1024 / 1024 < defaultconfig.imgLimt;
  const imgType = [
    "image/jpg", "image/jpeg", "image/png",
    "video/mp4",
    "application/vnd.ms-powerpoint",//ppt
		"text/plain",//txt
		"application/pdf",
		"application/vnd.ms-excel",//xls
		"application/vnd.openxmlformats-officedocument.wordprocessingml.document",//docx
		"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",//xlsx
    "application/msword",//doc
    "application/vnd.openxmlformats-officedocument.presentationml.presentation"//pptx
	];
	if (!imgType.includes(item.type)){
   ElMessage.error({ message: `不支持的文件类型,仅支持jpg,jpeg,png,ppt,docx,doc,pdf,txt,xls,xlsx,mp4,.pptx格式！` });
   return false;
  }
	else{
     if (item.size==0){
    ElMessage.error({ message: `不支持上传空文件，请重新上传` });
    return false;
  }
   if (!isLt3M){
    ElMessage.warning({ message: `上传文件大小不能超过5M！` });
    return false;
  }
  }
  if(imgType.includes(item.type) && isLt3M){
  formData.append("files", item);
  upload(formData).then((res) => {
    if (res.success&&Array.isArray(res.data)) {
            res.data.forEach((item) => {
               //页面展示的
          const loadFiles = {
            file_type: item.fileType==0 ? "图片" : item.fileType==1 ? "视频" :  "文档",
            file_name: item.fileName,
            file_url: item.fileUrl,
          };
          files.value.push(loadFiles);
      })
      if (title.value == "编辑成果" || title.value == "编辑草稿") {
                  res.data.forEach((item) => {
            editFiles.value.push(item)
           })
      } else if (title.value == "发布成果") {
        res.data.forEach((item) => {
          const loadFile = {
            file_type: item.fileType,
            file_name: item.fileName,
            file_url: item.fileUrl,
          };
          form.fileModels.push(loadFile);
        });
      }
    } 
  });
}

删除功能：

const delFile = (id, index) => {
         files.value.splice(index, 1);
  if (title.value == "编辑成果" || title.value == "编辑草稿") {
         if(id!=undefined){
        delFiles({ id: id })
    }
    else{
      editFiles.value.splice(index-filesCount.value, 1);
    }
  } else if (title.value == "发布成果") {
    form.fileModels.splice(index,1)
  }
};

预览功能

    <el-dialog v-model="dialogImg" width="600px" height="600px">
      <img
        w-full
        :src="defaultconfig.requestApi + dialogImageUrl"
        alt="Preview Image"
        style="width: 100%"
      />
    </el-dialog>

const showImg = (url) => {
  const strArr = url.split(".");
  const addType = strArr[1];
   if (["png", "jpg", "jpeg","PNG","JPG","JPEG"].includes(addType)) {
    dialogImageUrl.value = url;
    dialogImg.value = true;
  }
};