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

效果图：

 页面代码：

        
          

            
              上传资料
               
            
            
            

              

                
文件名称
                
文件类型
                
操作
              

              

                
{{ item.file_name }}
                
{{ item.file_type }}
                

                  删除 
                     预览
                
              
            
          
        

上传功能：

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)
  }
};

预览功能

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;
  }
};