el-upload照片墙二次封装

embedded/2024/10/20 11:44:01/

基于el-upload文件上传组件的二次封装。

使用场景一般是提交表单中的附属信息，组件要实现的是图片的上传，还有图片的回显。那么现在给出组件代码。

<template><div><el-uploadaction="":http-request="customRequest"list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove":on-success="handleUploadSuccess":file-list="fileList":before-upload="beforeUpload"><i class="el-icon-plus"></i></el-upload><el-dialogtitle="图片详情":visible.sync="dialogVisible"append-to-bodytop="56px"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog></div>
</template><script>
import { fileUpload, fileDownload } from "@/api/system/common";
export default {props: {onUploadSuccess: {type: Function,required: true,},initialUrls: {type: Array,default: () => [],},init: {type: Boolean,require: true,},},data() {return {action: "",dialogImageUrl: "",dialogVisible: false,fileList: [],};},watch: {init() {if (!this.init) {// 关闭对话框时，重置this.fileList = [];}},},methods: {async updateFileList() {const promises = this.initialUrls.map(async (item) => {const response = await fileDownload({ path: item.filePath });item.url = URL.createObjectURL(new Blob([response.data]));return item; // 返回更新后的 item});// 等待所有的 Promise 完成this.fileList = await Promise.all(promises);},beforeUpload(file) {// 限制最多上传三个文件if (this.fileList.length >= 3) {this.$message.error("最多只能上传三个图片");return false; // 返回 false 以阻止上传}return true; // 允许上传},customRequest({ file, onSuccess, onError }) {const formData = new FormData();formData.append("file", file);fileUpload(formData).then((response) => {return response;}).then((res) => {onSuccess(res); // 调用成功回调}).catch((error) => {onError(error); // 调用错误回调});},handleRemove(file, fileList) {// 从 fileList 中移除被删除的文件this.fileList = fileList;this.onUploadSuccess(this.fileList);},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},handleUploadSuccess(response, file, fileList) {const imageUrl = response.url || file.url; // 根据实际情况获取 URLthis.fileList.push({name: file.name,url: imageUrl, // 将新上传的图片 URL 添加到列表中filePath: response.data.filePath,});this.onUploadSuccess(this.fileList);},},
};
</script>

使用了 Element UI 库中的 el-upload 和 el-dialog 组件，用于实现图片上传和预览功能。

父组件调用