Vue页面内怎么将图片上传并适用折叠面板(vue,开发技术)

一、Vue页面内附件展示区域代码

<divclass="retuinfo"><divclass="theadInfo-headline"><span></span>{{FileDivName}}</div><Collapsev-model="defaultCollapse"><Panelv-for="(item,pngIndex)inpngFileArray"v-bind:key="pngIndex":name="item.num"v-show="item.isshow">{{item.name}}<divclass="obsfilesdiv"slot="content"><divv-for="(obs,index)initem.files"v-bind:key="index"class="obsfileslist"><inputref="fileImg"type="file"accept="image/*;capture=camera"@change="setObsFile(item.num,1,obs.FileType,obs.Num,obs.Code)"><label>{{obs.FileType}}<spanv-show="obs.FileType!='其他'">*</span></label><ulclass="obsfilesul"><liv-for="(objitem,objindex)inobs.FileObj"v-bind:key="objindex"><img:src="objitem.imgurl?objitem.imgurl:fileUrl"@click="showObsFiles(obs.FileFlag,objitem.imgurl)"/><imgsrc="../../../img/other/wrong.png"v-show="objitem.IsCanEdit"class="wrong_class"@click="deleteObsFlie(item.num,index,objindex,objitem.imgid,objitem.imgurl)"/></li><li@click="PlusClick(obs.FileType,obs.FileFlag,obs.Num)"><imgsrc="../../../img/icon-adds.png"alt=""/></li><div></div></ul></div></div></Panel></Collapse></div><divclass="modal"v-show="viewBigImg"><divclass="img-view-modal"><img:src="viewImgURL"@click="hideShow(0)"><Icontype="md-close"size='20'@click="hideShow(0)"/></div></div></div>

Vue项目引入了以下UI框架：（若想拿来即用 需要先在main.js中引入）IView、MintUI、Vant 此段代码只要确保引入IView即可正常使用

二、数据绑定设计

具体的不详细展开说，数组与通过属性控制，很好理解。

pngFileArray:[{num:'0',name:'整车',isshow:localStorage.getItem("RoleName").indexOf('铭牌质检员')!=-1?true:false,files:[//FileFlag://1:图片；2：视频3.其他{FileType:'整车铭牌图片',Code:'201',Num:0,FileFlag:1,FileObj:[],IsNoFile:true},{FileType:'车架VIN图片',Code:'207',Num:1,FileFlag:1,FileObj:[],IsNoFile:true},{FileType:'终端图片',Code:'301',Num:2,FileFlag:1,FileObj:[],IsNoFile:true}]},{num:'1',name:'里程',isshow:localStorage.getItem("RoleName").indexOf('客户经理')!=-1?true:false,files:[{FileType:'里程表照片',Code:'701',Num:3,FileFlag:1,FileObj:[],IsNoFile:true}]}],

三、绑定的方法

1.图片加载方法：

//获取图片列表getImageList(){this.$indicator.open({text:'图片加载中...',spinnerType:'snake'});let_this=this;letdownRequest={'crm_vin':this.parms.crm_vin,'crm_vehiclenumber':this.parms.crm_vehiclenumber};letimgListParams={"ImageDownRequest":JSON.stringify(downRequest),"username":localStorage.getItem("usernameone"),"password":localStorage.getItem("password")};console.log("获取图片列表参数:",imgListParams);_this.$ajax.defaults.headers['Content-Type']='application/x-www-form-urlencoded;';//配置请求头this.$ajax.post(this.imageListUrl,this.$qs.stringify(imgListParams)).then(resdata=>{_this.$indicator.close();console.log("获取到的图片列表数据：",resdata);letdata=resdata.data;console.log("转换后的图片列表数据：",data);if(resdata.status!=200){_this.$toast({message:'获取图片列表失败！',duration:3000});return;}//先清空原有的图片列表_this.pngFileArray.forEach((rr,index,array)=>{for(varfile=0;file<rr.files.length;file++){_this.pngFileArray[index].files[file].FileObj=[];_this.pngFileArray[index].files[file].IsNoFile=true;}});//将图片列表写入页面各图片分类区域for(vari=0;i<data.length;i++){_this.pngFileArray.forEach((rr,index,array)=>{for(varfile=0;file<rr.files.length;file++){if(data[i].crm_imagetypeno==rr.files[file].Code){letputparm={"IsCanEdit":false,"imgid":data[i].crm_careimageId,"imgurl":data[i].ImageUrl};_this.pngFileArray[index].files[file].FileObj.push(putparm);_this.pngFileArray[index].files[file].IsNoFile=false;}}});}}).catch(function(error){_this.$indicator.close();_this.$toast({message:error,duration:3000});});},

2.图片展示方法

showObsFiles(type,url){//展示图片或视频console.log("展示附件："+type);if(type==1){//图片this.viewBigImg=true;this.viewImgURL=url;}else{//文件this.$messagebox.alert("不支持查看文件，请到PC端操作！","提示");return;}},

3.上传图片相关方法

（最开始设计的是支持图片、视频和其他类型文件等上传，项目中已实现，本文中不做拓展)

PlusClick(type,flag,num){console.log("当前附件类型："+type);console.log("当前附件序号："+num);this.currentFileType=type;if(flag==1){//图片上传this.$refs.fileImg[num].dispatchEvent(newMouseEvent('click'));}elseif(flag==2){//视频上传this.$refs.fileVideo[num].dispatchEvent(newMouseEvent('click'));}else{//其他类型文件this.$refs.filElem[num].dispatchEvent(newMouseEvent('click'));}},setObsFile(classify,type,obsFileType,num,code){//保存图片到crm中var_this=this;varinputFile;//文件流console.log("图片大分类："+classify+""+obsFileType+""+num)+"图片编码："+code;if(type==1){inputFile=this.$refs.fileImg[num].files[0];this.$refs.fileImg[num].value='';}varfileName=inputFile.name;if(!inputFile){return;}if(inputFile.type=='image/jpg'||inputFile.type=='image/jpeg'||inputFile.type=='image/png'||inputFile.type=='image/gif'){}else{this.$messagebox.alert("请上传图片","提示");return;}_this.$indicator.open({text:'文件上传中，请稍候...',spinnerType:'snake'});//图片压缩与转换成base64文件流varreader=newFileReader();reader.readAsDataURL(inputFile);reader.onloadend=function(e){letresult=this.result;console.log('********未压缩前的图片大小********:'+result.length/1024)_this.pulic.dealImage(result,{},function(base64){console.log('********压缩后的图片大小********:'+base64.length/1024)_this.putObsFile(classify,fileName,base64,obsFileType,code);});//reader.result.substring(this.result.indexOf(',')+1);//'data:image/png;base64,'+reader.result}},putObsFile(classify,fileName,base64,obsFileType,code){//抽出公共上传图片文件方法var_this=this;letusernameone=this.$Base64.encode("administrator");letpassword=this.$Base64.encode("pass@word1");letparmsImages={crm_newenergyid:localStorage.getItem("crm_newenergyid"),vin:_this.parms.crm_vin,crm_vehiclenumber:_this.parms.crm_vehiclenumber,CareType:code,CreateBy:localStorage.getItem("SystemUserId"),ImageStr:base64.split(",")[1],username:usernameone,password:password}letparms={ImageMessage:JSON.stringify(parmsImages)}console.log(JSON.stringify(parmsImages));console.log(JSON.stringify(parms));_this.$ajax.defaults.headers['Content-Type']='application/x-www-form-urlencoded;';//配置请求头_this.$ajax.post(_this.imageSaveUrl,_this.$qs.stringify(parms)).then(resdata=>{_this.$indicator.close();console.log("接口响应数据：",resdata);letdata=resdata.data;console.log("转换后的响应数据：",data);if(resdata.status!=200){_this.$toast({message:'保存失败！接口调用异常',duration:3000});return;}//将上传成功后的图片url回写到页面的图片分类url中console.log("当前分类下的所有图片类型："+JSON.stringify(_this.pngFileArray[parseInt(classify)].files));for(vari=0;i<_this.pngFileArray[parseInt(classify)].files.length;i++){//遍历当前分类下的图片类型数组并赋值后台返回的数据if(obsFileType==_this.pngFileArray[parseInt(classify)].files[i].FileType){//设置图片文件路径等putparmletputparm={"IsCanEdit":true,"imgid":data.crm_careimageId,"imgurl":data.ImageUrl};_this.pngFileArray[parseInt(classify)].files[i].FileObj.push(putparm);_this.pngFileArray[parseInt(classify)].files[i].IsNoFile=false;}}_this.$messagebox.alert("附件上传成功","提示");}).catch(err=>{console.log(JSON.stringify(err));_this.$toast({message:'上传失败',duration:1500});_this.$indicator.close();});},

4.删除图片方法

(本文中是只有未提交的图片可删除，若已提交过的图片即页面初始加载获取到的图片不可以删除)

deleteObsFlie(classify,num,index,id,url){//删除附件var_this=this;this.$messagebox.confirm('确定删除该图片吗？',"确认").then(action=>{vardel_param={"id":id,"url":url};_this.$indicator.open({text:'删除图片中，请稍候...',spinnerType:'snake'});_this.$ajax.defaults.headers['Content-Type']='application/x-www-form-urlencoded;';//配置请求头_this.PromiseCall(_this.DelImgFilesURL,_this.$qs.stringify(del_param)).then(data=>{_this.$indicator.close();console.log(JSON.stringify(data));if(data.status!=200){_this.$messagebox.alert("删除图片失败","提示");return;}_this.pngFileArray[parseInt(classify)].files[num].FileObj.splice(index,1);_this.$toast({message:'删除图片成功',duration:1500});}).catch(err=>{_this.doCatch(err);_this.$toast({message:'删除图片失败'+err,duration:1500});_this.$indicator.close();});});},

四、CSS样式

.retuinfo{width:96%;height:auto;margin-top:20px;margin-left:2%;background-color:#F5F7FA;border-radius:15px;}.theadInfo-headline{width:100%;height:80px;background:#F3F3F3;display:flex;padding-left:30px;align-items:center;font-size:28px;color:#666666;border-radius:15px;}.theadInfo-headlinespan{width:6px;height:32px;background:#5576AB;border-radius:3px;margin-right:10px;}.ivu-collapse-header{height:40px;align-items:center;display:flex;}.obsfilesdiv{width:100%;height:auto;margin-top:.5rem;margin-bottom:50px;}.obsfileslist{width:100%;height:auto;padding:0.5rem0.5rem;background:#fff;}.obsfilesul{width:100%;height:auto;padding-bottom:8px;}.obsfilesulli{width:120px;height:120px;float:left;margin-top:.3rem;overflow:hidden;margin-right:.3rem;border:none;}.obsfilesulliimg{width:100%;height:100%;}.imglist{width:100%;margin-top:.5rem;margin-bottom:6rem;}.modal{background-color:#A9A9A9;position:fixed;z-index:99;left:0;top:0;width:100%;height:100%;padding-top:4rem;/*opacity:0.5;*/align-items:center;/*定义body的元素垂直居中*/justify-content:center;/*定义body的里的元素水平居中*/}.modalimg{animation-name:zoom;animation-duration:0.6s;display:block;padding:10px;margin:auto;max-width:100%;max-height:100%;box-shadow:02px6pxrgb(0,0,0,0),010px20pxrgb(0,0,0,0);border-radius:12px;border:1pxsolidwhite;position:absolute;top:50%;transform:translateY(-50%);}.showname{width:100px;height:60px;position:relative;top:-4.5rem;white-space:normal;word-break:break-all;word-wrap:break-word;}.wrong_class{width:30%!important;height:30%!important;position:relative;top:-3.8rem;left:2.6rem;}.wrongs_class{width:4%!important;height:4%!important;position:relative;/*top:-5.2em;*/left:0.5rem;}

最后附上实际效果图：