深入了解el-upload组件的参数配置与选项解析


# 1. 介绍el-upload组件的概述

## 1.1 什么是el-upload组件

在Vue.js框架中，`el-upload` 是一个基于 Element UI 的上传文件组件，用于实现文件上传功能。它提供了一种便捷的方式让用户上传文件，同时也支持文件的预览、删除等操作。

## 1.2 el-upload组件的主要作用

`el-upload` 组件主要用于处理前端文件上传的功能，包括但不限于图片上传、文件上传等。用户可以通过该组件上传文件到服务器，并在上传完成后执行相应的操作。

1.3 el-upload组件在Vue.js中的应用场景

- 用户头像上传：允许用户上传自己的头像图片。
- 文档上传：支持用户上传文档、表格等文件。
- 图片展示：上传图片后进行预览展示，例如相册功能。
- 多文件上传：支持用户同时上传多个文件的需求场景。

## 1.3 element上传附件实现

### 1.3.1 结构代码

<div class="flex-div uploaditem">
    //这里是上传了那些文件的提示，我没有要默认的文件提示
	<el-tooltip class="item" effect="dark" :content="tag.name" placement="top-start" v-for="(tag,index) in fileList" :key="index">
		<el-tag style="margin-right:10px;display:flex;" :disable-transitions="false" @close="handleClose(index)" closable  @click="downloadFile(tag)"><i class="el-icon-paperclip"></i><span class="tagtext">{{tag.name}}</span></el-tag>
	</el-tooltip>
	<el-upload
		class="upload-demo" 
		action  //必要属性，上传文件的地址，可以不给，但必须要有，不给就i调接口上传
		:http-request="uploadFile"//这个是就上传文件的方法，把上传的接口写在这个方法里
		ref="upload"
		:limit="fileLimit"//上传文件个数的限制
		:on-remove="handleRemove"//上传之后，移除的事件
		:file-list="fileList"//上传了那些文件的列表
		:on-exceed="handleExceed"//超出上传文件个数的错误回调
		:before-upload="beforeUpload"//文件通过接口上传之前，一般用来判断规则，
		//比如文件大小，文件类型
		:show-file-list="false"//是否用默认文件列表显示
		:headers="headers"//上传文件的请求头
		>
		<!-- action="/api/file/fileUpload" -->
		<el-button class="btn"><i class="el-icon-paperclip"></i>上传附件</el-button>
	</el-upload>
</div>

这段代码是用 Vue.js 框架和 Element UI 组件库编写的，主要用于实现文件上传功能。下面是对代码的逐行解释：

1. `<div class="flex-div uploaditem">`：创建一个包含上传项的容器，使用了 CSS 类 `flex-div` 和 `uploaditem`。
2. `<el-tooltip>`：这是 Element UI 提供的工具提示组件，用于在鼠标悬停时显示提示信息。`v-for` 指令用于循环遍历 `fileList` 数组，生成多个提示。
3. `<el-tag>`：这是 Element UI 的标签组件，用于显示已上传文件的名称。标签是可关闭的，用户可以通过点击关闭按钮移除标签。
4. `@close="handleClose(index)"`：当标签被关闭时，调用 `handleClose` 方法，并传入当前标签的索引。
5. `@click="downloadFile(tag)"`：当标签被点击时，调用 `downloadFile` 方法，传入当前标签的文件信息。
6. `<el-upload>`：这是 Element UI 的上传组件，负责处理文件上传的逻辑。它有多个属性和事件处理器：
- `action`：上传文件的地址，虽然可以不提供，但必须有一个有效的上传接口。
- `http-request="uploadFile"`：自定义上传文件的方法，通常用于处理上传请求。
- `ref="upload"`：为该组件设置引用，方便在 Vue 实中访问。
- `:limit="fileLimit"`：限制上传文件的数量。
- `@remove="handleRemove"`：文件移除时的事件处理。
- `:file-list="fileList"`：已上传文件的列表。
- `@exceed="handleExceed"`：当上传文件数量超过限制时的回调。
- `:before-upload="beforeUpload"`：在文件上传之前执行的函数，通常用于验证文件大小和类型。
- `:show-file-list="false"`：设置为 `false`，表示不显示默认的文件列表。
- `:headers="headers"`：上传请求的自定义请求头。
7. `<el-button>`：这是 Element UI 的按钮组件，用户可以点击该按钮来选择并上传文件。

整体来看，这段代码实现了一个自定义的文件上传组件，允许用户上传文件并显示已上传文件的标签，同时提供了一些文件上传的限制和验证功能。

### 1.3.2 data

//上传后的文件列表
fileList: [],
// 允许的文件类型
fileType: [ "pdf", "doc", "docx", "xls", "xlsx","txt","png"，"jpg", "bmp", "jpeg"],
// 运行上传文件大小，单位 M
fileSize: 50,
// 附件数量限制
fileLimit: 5,
//请求头
headers: { "Content-Type": "multipart/form-data" },

这段 JavaScript 代码通常是在 Vue.js 组件的 `data` 函数中定义的。它用于管理文件上传相关的状态和配置。结合上面的代码，这里是对每个属性的解释：

1. **`fileList: []`**：这是一个数组，用于存储已上传文件的信息。每当用户上传文件时，文件的信息（如文件名、大小等）会被添加到这个数组中。
2. **`fileType: ["pdf", "doc", "docx", "xls", "xlsx", "txt", "png", "jpg", "bmp", "jpeg"]`**：这是一个数组，定义了允许上传的文件类型。用户只能上传这些类型的文件，通常在 `beforeUpload` 方法中会用到这个数组来验证上传文件的类型。
3. **`fileSize: 50`**：这是一个数字，表示允许上传的文件大小限制，单位为 MB。这个限制通常也会在 `beforeUpload` 方法中进行检查，以确保用户上传的文件不超过这个大小。
4. **`fileLimit: 5`**：这是一个数字，表示用户可以上传的文件数量限制。这个限制会在 `el-upload` 组件中通过 `:limit` 属性进行设置。
5. **`headers: { "Content-Type": "multipart/form-data" }`**：这是一个对象，定义了上传请求的请求头。在文件上传时，通常需要设置 `Content-Type` 为 `multipart/form-data`，以便正确处理文件数据。

结合之前的上传组件代码，这些数据属性为文件上传功能提供了必要的配置和状态管理。具体来说：

- `fileList` 用于显示已上传文件的标签。
- `fileType` 和 `fileSize` 可以在 `beforeUpload` 方法中进行验证，以确保用户上传的文件符合要求。
- `fileLimit` 用于限制用户上传的文件数量，超出时会触发 `handleExceed` 方法。
- `headers` 确保上传请求的格式正确，以便服务器能够正确解析上传的文件。

### 1.3.3 method

//上传文件之前
beforeUpload(file){
	if (file.type != "" || file.type != null || file.type != undefined){
	    //截取文件的后缀，判断文件类型
		const FileExt = file.name.replace(/.+\./, "").toLowerCase();
		//计算文件的大小
		const isLt5M = file.size / 1024 / 1024 < 50; //这里做文件大小限制
		//如果大于50M
		if (!isLt5M) {
			this.$showMessage('上传文件大小不能超过 50MB!');
			return false;
		}
		//如果文件类型不在允许上传的范围内
		if(this.fileType.includes(FileExt)){
			return true;
		}
		else {
			this.$message.error("上传文件格式不正确!");
			return false;
		}
	}
},
//上传了的文件给移除的事件，由于我没有用到默认的展示，所以没有用到
handleRemove(){
},
//这是我自定义的移除事件
handleClose(i){
	this.fileList.splice(i,1);//删除上传的文件
	if(this.fileList.length == 0){//如果删完了
		this.fileflag = true;//显示url必填的标识
		this.$set(this.rules.url,0,{ required: true, validator: this.validatorUrl, trigger: 'blur' })//然后动态的添加本地方法的校验规则
	}
},
//超出文件个数的回调
handleExceed(){
	this.$message({
		type:'warni