element-plus中el-upload组件，实现上传、点击下载、删除功能等

element-plus中el-upload组件，实现上传、点击下载、删除功能等

全部代码：

  <el-form-item label="上传模板：" prop="fileId">
          <el-upload
             ref="exampleUploadRef"
            :file-list="fileList"//上传的文件显示列表, 格式如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
            :action="postUrl"//上传文件的路径
            :limit="1"//设置最大允许上传个数
            list-type="text"//文件列表的类型，默认是text
            accept=".doc,.docx" //接受上传的文件类型
            class="avatar-uploader"
            :before-remove="beforeRemove"//删除文件之前的钩子,若返回 false 或者返回 Promise 且被 reject，则停止删除停止执行handleRemove事件
            :before-upload="beforeUpload"//上传文件之前的钩子,进行判断文件大小和格式是否符合
            :on-remove="handleRemove"   //文件列表移除文件时的钩子
            :name="fileName"//上传的文件字段名
            :data="otherParam"//上传时附带的额外参数(如用户信息、业务标识等)
            :headers="headers"//设置上传的请求头部
            :on-preview="handlePreview"//点击文件列表中已上传的文件时的钩子
            :on-exceed="handleExceed" //定义超出限制时的行为(文件超出个数限制时的钩子)
            :multiple="false"//是否支持多选文件(默认是否)
            :on-success="uploadSuccess"//文件上传成功时的钩子
            :on-error="errorMessage"//文件上传失败时的钩子
            :on-change="handleChange"//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用    
          >
            <div class="uploadIcon">
              <el-icon>
                <Plus />
              </el-icon>
            </div>
            <template #tip>
              <div class="el-upload__tip text-red">只能上传doc/docx文件</div>
            </template>
          </el-upload>
</el-form-item>
 <script>
 export default {
  setup() {
      const token = store.getters["login_store/token"];
      const data = reactive({
	    fileName: "multipartFiles",//用于指定上传文件的字段名，也就是在后端接收上传文件时需要使用的字段名。在前端发送上传请求时，请求头中会包含该字段名和对应的文件数据，后端就可以通过这个字段名获取到上传的文件数据
	    headers: {
	            Authorization: "Bearer " + token //获取token数据
	             },
	    otherParam: {
		        bucketName: "fastabp",
		        fileType: "personalData",
		        unzip: false
	      },
         fileList:[],
         postUrl :""
      })
     const beforeRemove = (file, uploadFiles) => {
	       if(this.status=='view'){
         ElMessage({
		          message: "不允许删除！",
		          type: "error",
		          offset: 60
		        });
		        return false
		      }else{
		        return true
		      }
     };
       //文件移除操作
   const  handleRemove(file, fileList){
        data.fileList=fileList//或者data.fileList = []; //清空fileList所有数组    
    }, 
        //上传文件失败
    const errorMessage = (response) => {
		      return ElMessage({
		        message: "文件上传失败，请联系管理员",
		        type: "error",
		        offset: 60
		      });
    };
    //上传文件成功
    const uploadSuccess = (response, file, fileList) => {
		      data.fileList.push({//得到的文件数据转换成 name url方式
		        name: file.fileOrigName,
		        url: file.filePreviewUrl
		      });
    };
     //文件超出个数限制时的钩子
    const handleExceed = (files, fileList) => {};
     //点击文件列表中已上传的文件时的钩子,进行下载
    const handlePreview = (file) => {
		      console.log("file", file);
		      var link = document.createElement("a"); //定义一个a标签
		      link.download = file.name; //下载后的文件名称
		      link.href = file.url; //需要生成一个 URL 来实现下载
		      link.click(); //模拟在按钮上实现一次鼠标点击
		      window.URL.revokeObjectURL(link.href);
        };
    const handleChange = (uploadFile, uploadFiles) => {};
    //判断上传之前文件的格式
     const beforeUpload = (file) => {
		      const isLt20M = file.size / 1024 / 1024 < 20;
		      if (!isLt20M) {
		        ElMessage({
		          message: "上传图片大小不能超过 20MB!",
		          type: "error",
		          offset: 60
		        });
		      }
		      var fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
		      const isFile = fileType === "doc" || fileType === "docx";
		
		      if (!isFile) {
		        ElMessage({
		          message: "请选择正确的文件格式",
		          type: "error",
		          offset: 60
		        });
		        return false;
		      }
		      return isLt20M && isFile;
        };
    
     onMounted(async () => {
      data.postUrl = "http://XXXXX/file/uploadFile";
    });
    
   }
  }
 </script>
<style lang="scss" scoped>
                  //修改上传图标的样式
			  .uploadIcon {
					  border: 1px dashed var(--el-border-color);
					  border-radius: 5px;
					  padding: 2px 12px;
			     }
</style>

如图

1.实现上传，修改获取的文件name和url

2.上传文件前进行操作

限制上传格式和大小

删除清空存放文件的数组

4.点击已上传文件进行下载

3. 查看时，不允许删除文件
主要用到before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false ，则停止删除，不在执行:on-remove="handleRemove"事件