element中的文件上传

element-UI的文件上传

accept:接受上传的文件类型（thumbnail-mode 模式下此参数无效）
on-success:文件上传成功后调用
limit：限制文件个数
on-exceed：文件超出限制触发的事件
file-list：上传的文件列表
on-preview：点击已经上传文件的事件
before-upload：文件上传之前触发的是啊金
action：当前文件要上传的地址

  <div class="fileUrl">
  	<div class="common-title">附件</div>
  		<el-upload v-if="title !== '查看'" 
  			action="xxxx" 
  			accept=".pdf,.png,.jpg,.zip,.rar" 
  			ref="UploadFile"
  			:on-success="uploadFile" 
			:on-exceed="handleExced" 
			:file-list="fileList" 
			:before-remove="beforeRemove" 
			:on-preview="downloadFile" 
			:before-upload="beforeUpload"
			:limit="10">
			<div class="upload-file-flex">
			<el-button type="primary"><span class="upload-icon"></span>上传附件</el-button>
			</div>
		</el-upload>
			<div v-if="title !== '查看'" class="upload">
                  只支持上传.pdf、.png、.jpg、.zip、.rar格式，最多可添加10个附件，单个附件不超过10M
             </div>
    </div>
  </div>

<script>
	// 文件超出限制的个数给出提示
	handleExced(files, fileList){
		this.$message.warning('最多只能上传10个文件');
	},
	// 文件上传成功
	uploadFile(response, file, fileList){
	// 但有种情况文件显示系统异常，文件列表也存在这条数据(就是以下这种情况)
		if(response.code!=200){
			// 文件上传失败 给出相应的提示，并删除此条数据
			this.$message.warning(response.message)
			this.$refs.UploadFile.uploadFiles.splice(this.$refs.UploadFile.uploadFiles.indexOf(response), 1)
		}else{
			// 我给自己的上传列表定义为了fileList
			 this.fileList = fileList
		}
	}
</script>

// 接上面代码
// 删除想要删除的数据
 beforeRemove(file, fileList) {
      this.fileList = fileList;
  },
  // 上传代码前进行的操作---限制文件大小，限制文件格式
   beforeUpload(file) {
      const fileSize = file.size / 1024 / 1024; // 将文件大小转换为MB
      if (fileSize > 10) {
        this.$message.warning('文件大小不能超过10M');
        return false; // 阻止文件上传
      }
      const allowedExtensions = [
        '.pdf',
        '.jpg',
        '.zip',
        '.rar',
        '.png',
      ];
      const fileExtension = file.name
        .substring(file.name.lastIndexOf('.'))
        .toLowerCase();
      if (!allowedExtensions.includes(fileExtension)) {
        this.$message.warning('不支持的文件格式');
        return false; // 阻止文件上传
      }
      this.fileState = false
      return true; // 允许文件上传
    },