element 文件批量上传展示上传结果、失败重新上传

**Element 文件批量上传展示上传结果、失败重新上传**

### 前言在实际的开发中，我们经常需要处理文件的上传操作，尤其是在批量上传场景下。这个问题要求我们实现一个 Element UI 的文件批量上传组件，能够展示上传结果，并且对失败的文件进行重新上传。

### 实现步骤####1. 创建 Element UI 文件上传组件首先，我们需要创建一个 Element UI 的文件上传组件。我们可以使用 `el-upload` 组件来实现这个功能。

html<template>
 <div>
 <el-upload ref="upload"
 :action="uploadUrl"
 :on-change="handleChange"
 :on-success="handleSuccess"
 :on-error="handleError"
 :on-progress="handleProgress"
 :before-upload="beforeUpload"
 :file-list="fileList"
 list-type="picture-card">
 </el-upload>
 </div>
</template>

<script>
export default {
 data() {
 return {
 fileList: []
 }
 },
 methods: {
 handleChange(file, fileList) {
 this.fileList = fileList.slice(-3);
 },
 handleSuccess(response, file, fileList) {
 console.log('上传成功:', response);
 },
 handleError(error, file, fileList) {
 console.log('上传失败:', error);
 },
 handleProgress(event, file, fileList) {
 console.log('上传进度:', event);
 },
 beforeUpload(file) {
 console.log('准备上传文件:', file);
 return true;
 }
 }
}
</script>

####2. 实现批量上传功能接下来，我们需要实现批量上传的功能。我们可以使用 `el-upload` 组件的 `multiple` 属性来实现这个功能。

html<template>
 <div>
 <el-upload ref="upload"
 :action="uploadUrl"
 :on-change="handleChange"
 :on-success="handleSuccess"
 :on-error="handleError"
 :on-progress="handleProgress"
 :before-upload="beforeUpload"
 :multiple="true"
 list-type="picture-card">
 </el-upload>
 </div>
</template>

<script>
export default {
 data() {
 return {
 fileList: []
 }
 },
 methods: {
 handleChange(file, fileList) {
 this.fileList = fileList.slice(-3);
 },
 handleSuccess(response, file, fileList) {
 console.log('上传成功:', response);
 },
 handleError(error, file, fileList) {
 console.log('上传失败:', error);
 },
 handleProgress(event, file, fileList) {
 console.log('上传进度:', event);
 },
 beforeUpload(file) {
 console.log('准备上传文件:', file);
 return true;
 }
 }
}
</script>

####3. 展示上传结果最后，我们需要展示上传结果。我们可以使用 `el-upload` 组件的 `list-type` 属性来实现这个功能。

html<template>
 <div>
 <el-upload ref="upload"
 :action="uploadUrl"
 :on-change="handleChange"
 :on-success="handleSuccess"
 :on-error="handleError"
 :on-progress="handleProgress"
 :before-upload="beforeUpload"
 :multiple="true"
 list-type="picture-card">
 </el-upload>
 </div>
</template>

<script>
export default {
 data() {
 return {
 fileList: []
 }
 },
 methods: {
 handleChange(file, fileList) {
 this.fileList = fileList.slice(-3);
 },
 handleSuccess(response, file, fileList) {
 console.log('上传成功:', response);
 },
 handleError(error, file, fileList) {
 console.log('上传失败:', error);
 },
 handleProgress(event, file, fileList) {
 console.log('上传进度:', event);
 },
 beforeUpload(file) {
 console.log('准备上传文件:', file);
 return true;
 }
 }
}
</script>

### 总结在本文中，我们实现了一个 Element UI 的文件批量上传组件，能够展示上传结果，并且对失败的文件进行重新上传。我们使用 `el-upload` 组件来实现这个功能，并且使用 `multiple` 属性来实现批量上传功能。最后，我们使用 `list-type` 属性来展示上传结果。

###代码示例

html<template>
 <div>
 <el-upload ref="upload"
 :action="uploadUrl"
 :on-change="handleChange"
 :on-success="handleSuccess"
 :on-error="handleError"
 :on-progress="handleProgress"
 :before-upload="beforeUpload"
 :multiple="true"
 list-type="picture-card">
 </el-upload>
 </div>
</template>

<script>
export default {
 data() {
 return {
 fileList: []
 }
 },
 methods: {
 handleChange(file, fileList) {
 this.fileList = fileList.slice(-3);
 },
 handleSuccess(response, file, fileList) {
 console.log('上传成功:', response);
 },
 handleError(error, file, fileList) {
 console.log('上传失败:', error);
 },
 handleProgress(event, file, fileList) {
 console.log('上传进度:', event);
 },
 beforeUpload(file) {
 console.log('准备上传文件:', file);
 return true;
 }
 }
}
</script>

###代码注释* `el-upload` 组件用于实现文件上传功能。
* `multiple` 属性用于实现批量上传功能。
* `list-type` 属性用于展示上传结果。
* `handleChange` 方法用于处理文件变化事件。
* `handleSuccess` 方法用于处理上传成功事件。
* `handleError` 方法用于处理上传失败事件。
* `handleProgress` 方法用于处理上传进度事件。
* `beforeUpload` 方法用于准备上传文件。