element plus中el-upload实现上传多张图片的示例代码
作者：天外天-亮
element中图片上传的一些要点
1、想要实现多图片上传一定要标注multiple属性、而且一定要是自己手动实现上传功能、这里有两个方法：
（1）通过配置file-list,即获取file-list中上传的文件然后封装到FormData()中，最后调用axios传递formData数据到后台
（2）重写http-request="uploadFile"方法，重写了这个方法后调用’this.$refs.upload.submit()，就会自动调用你重写的http-request=""方法，它会根据你上传的图片个数循环调用多少次。如你上传了两张，调用’this.$refs.upload.submit()后内部会自动调用两次http-request=""方法。这样我们在http-request=""方法中设置this.fileList.append(‘file’, item.file)就能将文件封装进一个list中，然后再封装进formData。最后调用axios即可。
注意: 上面两种方法，使用方式是一样的，都是自己封装好一个FormData,然后调用axios，而且axios传递数据一定是data:yourData样式的，千万不要自讨苦吃这样写query:youData
2、element图片组件是默认上传的，添加属性auto-upload="false"后才能关闭。也只有关闭了自动提交后、才能实现手动提交
3、element图片组件自动上传如果没有手动封装FormData数据然后调用axios，即使添加了multiple属性可以上传多个,element图片组件只会是一个图片发送一个请求的，而并非是一个请求多个图片
4、调用this.$refs.upload.submit(),element图片组件会使用默认的上传方式上传文件 如果重写了http-reques方法，那么久会调用http-reques方法,默认上传和’this.$refs.upload.submit()'请求url都是element图片组件上绑定的action，只有自己调用axios才不会使用到这个action
5、如果想要一个请求上传多个图片并附带参数、只能使用formData.append("你的属性名"，属性值)的方式，使用formData.append("实体类名",this.form)是无法成功传数据的
6、关闭自动上传后调用this.$refs.upload.submit()才能生效，默认上传请求url都会是element图片组件上绑定的action，自动上传都是自己调用axios上传的
实现自定义下载、删除、查看
<template>
<el-dialog :close-on-click-modal="false" :model-value="dialogVisibleBox" :before-close="handleCloseUploadImg">
<el-upload
ref="uploadRef"
v-model:file-list="fileList"
list-type="picture-card"
:on-change="onChangeFun"
:auto-upload="false"
action="#">
<el-icon>
<Plus/>
</el-icon>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<el-icon><zoom-in /></el-icon>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<el-icon><Download /></el-icon>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemoveFun(file)"
>
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
</template>
</el-upload>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleCloseUploadImg">取消</el-button>
<el-button type="primary" @click="saveData">
确认
</el-button>
</span>
</template>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image"/>
</el-dialog>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, toRefs, watch } from 'vue';
import {ElNotification, UploadProps, UploadUserFile} from 'element-plus';
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue';
const props = defineProps({
dialogVisibleBox: Boolean
});
let {dialogVisibleBox} = toRefs(props);
const uploadRef: any = ref();
let fileList: any = reactive<UploadUserFile[]>([
// {
// : 'food.jpeg',
// url: '../../../assets/image/order/blue_light_2.png',
// }
]);
const saveImgList: any = {};
const dialogImageUrl = ref('');
let disabled = ref(false);
const dialogVisible = ref(false);
let saveUploadImgNum: number = 0;
const onChangeFun = (rawFile: any) => {
if (rawFile.status !== "ready") return;
const maxSize = 30;
const imgSize = rawFile.size / 1024 / 1024 < maxSize;
const imgType = ['image/png', 'image/jpg', 'image/jpeg'].includes(rawFile.raw.type);
if (!imgType)
ElNotification({
title: '温馨提示',
message: '请上传png、jpg、jpeg文件格式的图片！',
type: 'warning',
});
if (!imgSize)
ElNotification({
title: '温馨提示',
message: `上传图片大小不能超过 ${maxSize}M！`,
type: 'warning',
});
if (imgType && imgSize) {
saveUploadImgNum++;
}
};
// 传递关闭事件
const emit = defineEmits(['handleCloseUploadImg']);
const handleCloseUploadImg = () => {
// 清空upload列表
uploadRef.value.clearFiles();
emit("handleCloseUploadImg");
};
const handleRemoveFun= async (file: any) => {
// 这里可以先处理后端删除 前端再删除
const index = fileList.indexOf(file);
if (index !== -1) { // 确保文件存在于文件列表中
saveUploadImgNum--;
fileList.splice(index, 1); // 从文件列表中删除文件
}
}
const handlePictureCardPreview = (file: any) => {
// 方法查看
dialogImageUrl.value = file.url!;
dialogVisible.value = true;
}
const handleDownload = (file: any) => {
// 下载
const link: any = document.createElement('a');
link.download = file.name;
link.href = file.url;
link.click();
window.URL.revokeObjectURL(link.href);
}
</script>到此这篇关于element plus中el-upload实现上传多张图片的示例代码的文章就介绍到这了,更多相关element el-upload上传多张图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！