网站建设架构 服务器,科学小制作,丽水市网站建设,网站建设自建服务器场景#xff1a;
在表单页#xff0c;有图片需要上传#xff0c;表单的操作行按钮中有上传按钮#xff0c;点击上传按钮。
弹出el-dialog进行图片的上传#xff0c;可以上传多张图片。
由于多个表单页都有上传多张图片的操作#xff0c;因此将上传多图的el-upload定义…场景
在表单页有图片需要上传表单的操作行按钮中有上传按钮点击上传按钮。
弹出el-dialog进行图片的上传可以上传多张图片。
由于多个表单页都有上传多张图片的操作因此将上传多图的el-upload定义为公共的子组件。 效果如图 util.js图片转base64
使用到的工具jsfile转url
util.js图片转base64// 转base64 el-upload上传的file 不能直接用要用file.raw
// 文件对象转base64
export function getBase64Url (file) {return new Promise ((resolve,reject) {const reader new FileReader(); //实例化文件读取对象reader.readAsDataURL(file.raw); //将文件读取为 DataURL,也就是base64编码reader.onload function () {resolve(reader)}reader.onerror function (error) {reject(error)}})}
父组件代码
el-dialog :visible.syncshowUploadDialog :modalfalse title上传图片 width30%div stylewidth:80%;height:80%;justify-content:center;align-items:center;text-align:center;display:flexdiv stylemargin-bottom:20px; upload-many refimgUpload :datagetChildParam(1,正面照) getUploadChildDatagetUploadChildData/upload-many el-button typeprimary stylemargin-top:10px clickuploadRouteImgList sizemini提交图片/el-button/div/div
/el-dialog//定义的data 省略样式。。。。
showUploadDialog:false,//默认false 点击上传 设置为true
uploadRowObj:{},//要上传的对象// methods 方法 省略样式。。。。
getChildParam(type,title){var obj new Object();obj.type type;obj.title title;// 当子组件需要回显已经有的图片时应该给fileList赋值obj.fileList [];// 模拟赋值 用于回显// 假设 this.dbImgUrlList 这是数据库返回的base64 url 算有base64前缀if(this.dbImgUrlList.length0){for(var i0;ithis.dbImgUrlList.length;i){obj.fileList.push({id:i,url:this.dbImgUrlList[i],name:imgi.png})}}obj.commonImgList[];return obj;},//接收子组件上传的base64格式的图片url赋值给想传给后端的对象
getUploadChildData(obj){// 这个是filesthis.uploadRowObj.routeImgList obj.commonImgList;// 这个是每张图片的base64url 数组this.uploadRowObj.imgUrlArr obj.imgUrlArr ;},//下面写了两种方法可按需用其中一种
async uploadRouteImgList (){if(this.uploadRowObj.routeImgList.length0){// 第一种 上传files到后端 后端接收为 RequestParam(id) String id,RequestParam(files) MultipartFile[] files let formData new FormData();this.uploadRowObj.routeImgList.forEach(file{formData.append(files,file);})formData.append(id, this.uploadRowObj.id);const {code,message,data} await uploadImg(formData)if(code 0){this.$message.success(上传成功);this.showUploadDialog false;}// 第二种 上传的是对象 对象含id和base64Url的数组 (在子组件中 url去除了base64标识的前缀)const {code,message,data} await uploadImg(this.uploadRowObj)if(code 0){this.$message.success(上传成功);this.showUploadDialog false;}}else{this.$message.error(上传图片不能为空)}}
子组件代码 templatediv!-- 上传多张图片的公共组件 limit可以子组件动态传不同的值过来 :file-listdata.fileList 可以回显--el-upload action# acceptimage/** :limit10 :multipletrue :auto-uploadfalselist-typepicture-card :file-listdata.fileList :on-changechangeUpload:before-uploadhandleBeforeUpload:on-removeimgRemove:show-file-listtruei classel-icon-plus/i/el-upload/div/templatescriptimport {getBase64Url} from /api/utils.jsexport default {name:upload,props:{data:{type: Object,default:(){return {} }},},data(){return {fileList:[],imageList:[],hideUpload:false,imgVisible:false,imgUrl:,onChangeImgUrl:,type:,imgUrlArr:[],}},mounted(){},methods:{//上传基本校验handleBeforeUpload(file,type){var img file.name.substring(file.name.lastIndexOf(.) 1)const suffix img jpgconst suffix2 img pngconst suffix3 img jpegconst isLt1M file.size / 1024 / 1024 1;if (!suffix !suffix2 !suffix3) {this.$message.error(只能上传图片);return false}// 可以限制图片的大小if (!isLt1M) {this.$message.error(上传图片大小不能超过 1MB!);}return suffix || suffix2 || suffix3},//上传后 删除async imgRemove(file ,fileList){var parentObj this.data;//删除后更新了传给父组件的图片file集合parentObj.commonImgList fileList;this.imgUrlArr [];//删除后更新了传给父组件的图片base64url集合 for (let fileTemp of fileList) {// 父组件如果传了回显的list if(!fileTemp.raw){//这是回显的获取base64 urlvar res fileTemp.url.replace(/^data:image\/\w;base64/,);this.imgUrlArr.push(res);}else{// 这是刚刚上传的获取base64 urlconst response await getBase64Url(fileTemp);var res response.result;res res.replace(/^data:image\/\w;base64/,); this.imgUrlArr.push(res);}}parentObj.imgUrlArr this.imgUrlArr;// 传给父组件方法this.$emit(getUploadchildData, parentObj);},//上传控件的改变事件 提交到父组件async changeUpload(file, fileList){var parentObj this.data;//删除后更新了传给父组件的图片file集合parentObj.commonImgList fileList;//多张图片都转base64 这是需要base64的情况下for (let fileTemp of fileList) {// 父组件如果传了回显的list if(!fileTemp.raw){//这是回显的获取base64 urlvar res fileTemp.url.replace(/^data:image\/\w;base64/,);this.imgUrlArr.push(res);}else{// 这是刚刚上传的获取base64 urlconst response await getBase64Url(fileTemp);var res response.result;res res.replace(/^data:image\/\w;base64/,); this.imgUrlArr.push(res);}}// 所有图片的base64 url集合parentObj.imgUrlArr this.imgUrlArr;this.$emit(getUploadchildData, parentObj);}}
}/scriptstyle .img{width: 60%;height: 80;margin: 0 auto;display: flex;justify-content: center;align-items: center;}/style
