`el-
upload` 是
Element UI 提供的
上传组件，下面详细解析包含 `ref`、`limit`、`accept` 等属性的代码示例，并给出优化建议。
### 代码示例
```vue
<template>
<div>
<el-
upload
ref="
uploadRef"
action="your_
upload_url"
:limit="3"
accept=".jpg,.png,.gif"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:before-
upload="before
Upload"
:file-list="fileList"
list-type="picture-card"
>
<i class="el-icon-plus"></i>
</el-
upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList
: []
};
},
methods
: {
handleExceed(files, fileList) {
this.$message.warning(`只能
上传 ${this.limit} 个
文件`);
},
handleSuccess(response, file, fileList) {
console.log('
上传成功', response);
},
before
Upload(file) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isGIF = file.type === 'image/gif';
const isAllowed = isJPG || isPNG || isGIF;
if (!isAllowed) {
this.$message.error('只能
上传 JPG、PNG、GIF 格式的
文件');
}
return isAllowed;
}
}
};
</script>
```
### 代码解析
1. **`ref` 属性**：`ref="
uploadRef"` 用于在 Vue 实例中引用该
上传组件。通过 `this.$refs.
uploadRef` 可以访问到该
组件的实例，进而调用
组件的方法，比如手动触发
上传等。
2. **`limit` 属性**：`
:limit="3"` 限制了
上传文件的最大数量为 3 个。当
上传的
文件数量超过这个限制时，会触发 `on-exceed` 事件。
3. **`accept` 属性**：`accept=".jpg,.png,.gif"` 规定了允许
上传的
文件类型，这
里只允许
上传 JPG、PNG、GIF 格式的
文件。不过需要注意的是，`accept` 属性只是在浏览器层面做了一个简单的限制，用户仍然可以绕过这个限制选择其他类型的
文件，所以还需要在 `before-
upload` 钩子中进行二次校验。
4. **`on-exceed` 事件**：当
上传的
文件数量超过 `limit` 限制时，会触发该事件。在示例中，调用 `handleExceed` 方法给出提示信息。
5. **`on-success` 事件**：
文件上传成功后会触发该事件。在示例中，调用 `handleSuccess` 方法，打印
上传成功的响应信息。
6. **`before-
upload` 钩子**：在
文件上传之前会触发该钩子，可以在这个钩子中对
文件进行一些校验。在示例中，对
文件类型进行了二次校验，如果
文件类型不符合要求，给出错误提示并返回 `false` 阻止
文件上传。
7. **`file-list` 属性**：用于绑定
上传的
文件列表。在示例中，将
文件列表绑定到 `
data` 中的 `fileList` 变量。
### 优化建议
1. **错误处理优化**：可以将错误提示信息提取到常量中，方便统一管理和修改。
```javascript
const ERROR_MESSAGES = {
FILE_TYPE_NOT_ALLOWED
: '只能
上传 JPG、PNG、GIF 格式的
文件',
FILE_EXCEED_LIMIT
: '只能
上传 3 个
文件'
};
// 在 methods 中
使用
handleExceed(files, fileList) {
this.$message.warning(ERROR_MESSAGES.FILE_EXCEED_LIMIT);
},
before
Upload(file) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isGIF = file.type === 'image/gif';
const isAllowed = isJPG || isPNG || isGIF;
if (!isAllowed) {
this.$message.error(ERROR_MESSAGES.FILE_TYPE_NOT_ALLOWED);
}
return isAllowed;
}
```
2. **
文件类型校验优化**：可以将
文件类型校验逻辑封装成一个独立的函数，提高代码的复用性。
```javascript
function isAllowedFileType(file) {
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
return allowedTypes.includes(file.type);
}
// 在 before
Upload 中
使用
before
Upload(file) {
const isAllowed = isAllowedFileType(file);
if (!isAllowed) {
this.$message.error(ERROR_MESSAGES.FILE_TYPE_NOT_ALLOWED);
}
return isAllowed;
}
```
3. **添加加载状态**：在
文件上传过程中，可以添加加载状态，给用户更好的交互体验。
```vue
<template>
<div>
<el-
upload
ref="
uploadRef"
action="your_
upload_url"
:limit="3"
accept=".jpg,.png,.gif"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:before-
upload="before
Upload"
:file-list="fileList"
list-type="picture-card"
:on-progress="handleProgress"
>
<i class="el-icon-plus"></i>
<template #tip>
<div v-if="is
Uploading">
上传中...</div>
</template>
</el-
upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList
: [],
is
Uploading
: false
};
},
methods
: {
handleProgress(event, file, fileList) {
this.is
Uploading = true;
},
handleSuccess(response, file, fileList) {
console.log('
上传成功', response);
this.is
Uploading = false;
},
// 其他方法保持不变
}
};
</script>
```
###
探讨使用ElementUI的Upload组件上传文件时，如何正确地将data参数传递到NodeJS后端。文章分析了body-parser不支持multipart/form-data格式的问题，并提供了修改后台接收数据格式的解决方案。
扫一扫
2021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
