【Vue】以RuoYi框架前端为例，ElementUI封装图片上传组件——将图片信息转成base64后提交到后端保存

RuoYi 框架本身对于图片上传功能，在ElementUI的 <el-upload> 组件的基础装封装了 @/components/ImageUpload/index.vue 组件。本组件就是在 RuoYi 自定义的 <ImageUpload> 组件的基础上进行改造，将图片的信息在上传之前处理成 base64 格式，用于提交到后端接口，以及前端图片相应的预览展示。

自定义组件 ImageUploadBase64

组件目录： @/components/ImageUploadBase64/index.vue

<template><div class="component-upload-image"><el-upload ref="imageUploadRef"action="#"list-type="picture-card"accept=".png, .jpeg, .jpg":limit="limit":on-change="handleChange":on-remove="handleRemove":on-preview="handlePictureCardPreview":on-exceed="handleExceed":file-list="fileList":class="{hide: this.fileList.length >= this.limit}":show-file-list="true":auto-upload="false"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="previewDialogVisible" title="图片预览" width="800" append-to-body><el-image style="display: block; max-width: 100%; margin: 0 auto":src="previewDialogImageUrl" alt=""></el-image></el-dialog></div>
</template>
<script>export default {props: {// 对应父组件 v-model绑定，对应本组件 this.$emit("input",参数)绑定value: [String, Object, Array],// 图片数量限制limit: {type: Number,default: 5,},// 大小限制(MB)fileSize: {type: Number,default: 5,},// 文件类型, 例如['png', 'jpg', 'jpeg']fileType: {type: Array,default: () => ["png", "jpg", "jpeg"],},},data() {return {// 图片预览弹窗 显隐previewDialogVisible: false,// 图片预览 urlpreviewDialogImageUrl: '',// 待上传的图片集合 是转化完base64 后的结果fileList: [/*{name:'',url:''}*/]}},watch: {value: {handler(val) {if (val) {// 首先将值转为数组const list = Array.isArray(val) ? val : this.value.split(',');// 然后将数组转为对象数组this.fileList = list.map(item => {if (typeof item === "string") {item = {name: item, url: item};}return item;});} else {this.fileList = [];return [];}},deep: true,immediate: true}},methods: {/*** 校验文件尺寸是否符合要求 和类型是否是图片* @param file* @returns {boolean}*/handleFileValidate(file) {// 上传文件的类型let type = file.raw.type || file.type;let isImg = type.indexOf("image") > -1;if (isImg) {if (this.fileSize) {const isLt = file.size / 1024 / 1024 < this.fileSize;if (!isLt) {this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);return false;} else {return true;}}} else {this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);// 不是图片格式return false;}},/* 添加文件、上传成功和上传失败时都会被调用 */handleChange(file, fileList) {if (this.handleFileValidate(file)) {this.fileToBase64(file);} else {// 删除尺寸大的图片 或者非图片类型的文件let lastIndex = fileList.length - 1;if (lastIndex > -1) {fileList.splice(lastIndex, 1);}}},/*** 删除图片* @param file 被删除的图片* @param fileList 剩余的文件信息列表*/handleRemove(file, fileList) {const findex = this.fileList.map(f => f.url).indexOf(file.url);if (findex > -1) {// 删除对应的 文件数据this.fileList.splice(findex, 1);this.$emit("input", this.listToArray(this.fileList));}},/*预览图片*/handlePictureCardPreview(file) {this.previewDialogImageUrl = file.url;this.previewDialogVisible = true;},/*** 文件个数超出* @param files 超出的文件信息* @param fileList 原来已经添加的文件信息*/handleExceed(files, fileList) {this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);},/*** 将el-upload组件上传的文件转为base64* @param file*/fileToBase64(file) {var reader = new FileReader();reader.readAsDataURL(file.raw); // 转换为Base64reader.onload = e => {// 当转换完成后，e.target.result就是Base64字符串const base64 = e.target.result;this.fileList.push({name: base64, url: base64});this.$emit("input", this.listToArray(this.fileList));};},// list中的元素{name:'',url:''} 转 url字符串listToArray(list) {let arr = [];for (let i in list) {arr.push(list[i].url);}return arr;}}
}</script>
<style scoped lang="scss">
// .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card {display: none;
}// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {transition: all 0s;
}::v-deep .el-list-enter, .el-list-leave-active {opacity: 0;transform: translateY(0);
}
</style>

表单中引用如下

<template><div class="app-container"><!-- 添加或修改对话框 --><el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" :show-message="false" label-width="80px"><el-col :span="24"><el-form-item label="上传图片"><ImageUploadBase64 v-model="form.base64DataList" :file-size="10" @input="handleImageInput"></ImageUploadBase64></el-form-item></el-col></el-row></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm()">保 存</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog></div>
</template><script>
import ImageUploadBase64 from "@/components/ImageUploadBase64/index.vue";import {listWorkInfo, getWorkInfo, delWorkInfo, addWorkInfo, updateWorkInfo} from "@/api/basic/work";export default {name: "Work",components: {ImageUploadBase64},data() {return {// 弹出层标题title: "",// 是否显示弹出层open: false,// 表单参数form: {},};},created() {this.getList();},methods: {/*** 子组件 this.$emit("input", this.listToArray(this.fileList)); 返回的数据* @param fileList*/handleImageInput(fileList){// 这里返回的就是base64字符串的数组，可以直接提交后端接口，也可以根据业务做其他处理console.log("handleImageInput-----:", fileList)},// 取消按钮cancel() {this.open = false;this.reset();},// 表单重置reset() {this.form = {id: nullbase64DataList:[]};this.resetForm("form");},/** 新增按钮操作 */handleAdd() {this.reset();this.title = "添加工作信息";this.open = true;},/** 修改按钮操作 */handleUpdate(row) {this.reset();const id = row.id || this.idsgetWorkInfo(id).then(response => {this.form = response.data;this.open = true;this.title = "修改工作信息";});},/** 提交按钮 */submitForm: function () {this.$refs["form"].validate(valid => {if (valid) {if (this.form.id != undefined) {updateWorkInfo(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {addWorkInfo(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});}}
};
</script>