全返网站建设,网站策划书范文模板,番禺市桥网站建设公司,建设银行福建分行招聘网站RuoYi 框架本身对于图片上传功能#xff0c;在ElementUI的 el-upload 组件的基础装封装了 /components/ImageUpload/index.vue 组件。本组件就是在 RuoYi 自定义的 ImageUpload 组件的基础上进行改造#xff0c;将图片的信息在上传之前处理成 base64 格式在ElementUI的 el-upload 组件的基础装封装了 /components/ImageUpload/index.vue 组件。本组件就是在 RuoYi 自定义的 ImageUpload 组件的基础上进行改造将图片的信息在上传之前处理成 base64 格式用于提交到后端接口以及前端图片相应的预览展示。 自定义组件 ImageUploadBase64 组件目录 /components/ImageUploadBase64/index.vue templatediv classcomponent-upload-imageel-upload refimageUploadRefaction#list-typepicture-cardaccept.png, .jpeg, .jpg:limitlimit:on-changehandleChange:on-removehandleRemove:on-previewhandlePictureCardPreview:on-exceedhandleExceed:file-listfileList:class{hide: this.fileList.length this.limit}:show-file-listtrue:auto-uploadfalsei classel-icon-plus/i/el-uploadel-dialog :visible.syncpreviewDialogVisible title图片预览 width800 append-to-bodyel-image styledisplay: block; max-width: 100%; margin: 0 auto:srcpreviewDialogImageUrl alt/el-image/el-dialog/div
/template
scriptexport 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 langscss
// .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
表单中引用如下
templatediv classapp-container!-- 添加或修改对话框 --el-dialog :titletitle :visible.syncopen width500px append-to-bodyel-form refform :modelform :rulesrules :show-messagefalse label-width80pxel-col :span24el-form-item label上传图片ImageUploadBase64 v-modelform.base64DataList :file-size10 inputhandleImageInput/ImageUploadBase64/el-form-item/el-col/el-row/el-formdiv slotfooter classdialog-footerel-button typeprimary clicksubmitForm()保 存/el-buttonel-button clickcancel取 消/el-button/div/el-dialog/div
/templatescript
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
这个组件将图片信息直接在前端转化成 base64格式的字符串数字后端可以直接使用ListString 接收图片的信息并进行后续的处理。
