gisq-hb-mobile-upload-v3/dist/gisqUpload.es.js

``` npm install ```

import{openBlock as e,createElementBlock as i,createElementVNode as t,withModifiers as o,toDisplayString as l,createCommentVNode as s,Fragment as n,renderList as a,withDirectives as d,vShow as c,resolveComponent as r,resolveDirective as h,createVNode as u}from"vue";const p={name:"gisq-sheet",props:{p_title:null,p_cancelable:{type:Boolean,default:!0},p_visiable:!1,p_sheetItems:Array},data:()=>({}),methods:{dismiss(){this.$emit("update:p_visiable",!1)},clickOnSheetItem(e){this.dismiss(),this.$emit("clickOnSheet",e)}}},f={key:0,class:"wrapper"},g={key:0,class:"gisq-title"},m={class:"gisq-items"},v=t("div",{class:"gisq-line"},null,-1),y=["onClick"],w=t("div",{class:"gisq-line"},null,-1);p.render=function(d,c,r,h,u,p){return r.p_visiable?(e(),i("div",f,[t("div",{class:"gisq-dialog",ref:"box",onClick:c[1]||(c[1]=o((()=>{}),["stop"]))},[null!=r.p_title?(e(),i("div",g,l(r.p_title),1)):s("",!0),t("div",m,[v,(e(!0),i(n,null,a(r.p_sheetItems,((o,s)=>(e(),i("div",{key:s,onClick:e=>p.clickOnSheetItem(o),class:"gisq-item"},[t("div",null,l(o.name),1),w],8,y)))),128))]),t("div",{class:"gisq-cancel",onClick:c[0]||(c[0]=e=>p.dismiss())},"取消")],512)])):s("",!0)};const k={props:{modelValue:String,showDialog:{type:Boolean,default:!1},type:{type:String,default:"default"},content:{type:String,default:""},title:{type:String,default:""},cancelText:{type:String,default:"取消"},dangerText:{type:String,default:"删除"},confirmText:{type:String,default:"确认"}},data:()=>({showMask:!1}),methods:{closeMask(){this.showMask=!1},closeBtn(){this.$emit("cancel"),this.closeMask()},dangerBtn(){this.$emit("danger"),this.closeMask()},confirmBtn(){this.$emit("confirm"),this.closeMask()}},mounted(){this.showMask=this.value},watch:{modelValue:{deep:!0,immediate:!0,handler(e,i){}},showDialog:{deep:!0,immediate:!0,handler(e,i){this.showMask=e}},showMask:{deep:!0,immediate:!0,handler(e,i){0==e&&this.$emit("update:showDialog",!1)}}}},F={class:"dialog"},b={class:"dialog-container"},q={class:"dialog-title"},M=["innerHTML"],C={class:"btns"},S=[t("i",{class:"iconfont-gisqupload icon-close"},null,-1)];function U(e,i){for(var t=e.split(","),o=t[0].match(/:(.*?);/)[1],l=atob(t[1]),s=l.length,n=new Uint8Array(s);s--;)n[s]=l.charCodeAt(s);return new File([n],i,{type:o})}k.render=function(o,n,a,r,h,u){return d((e(),i("div",F,[t("div",b,[t("div",q,l(a.title),1),t("div",{class:"content",innerHTML:a.content},null,8,M),t("div",C,["confirm"!=a.type?(e(),i("div",{key:0,class:"default-btn",onClick:n[0]||(n[0]=(...e)=>u.closeBtn&&u.closeBtn(...e))},l(a.cancelText),1)):s("",!0),"danger"==a.type?(e(),i("div",{key:1,class:"danger-btn",onClick:n[1]||(n[1]=(...e)=>u.dangerBtn&&u.dangerBtn(...e))},l(a.dangerText),1)):s("",!0),"confirm"==a.type?(e(),i("div",{key:2,class:"confirm-btn",onClick:n[2]||(n[2]=(...e)=>u.confirmBtn&&u.confirmBtn(...e))},l(a.confirmText),1)):s("",!0)]),t("div",{class:"close-btn",onClick:n[3]||(n[3]=(...e)=>u.closeMask&&u.closeMask(...e))},S)])],512)),[[c,h.showMask]])};const H={getDeviceInfo:function(e){console.log("call getDeviceInfo success"),e&&plus.device.getInfo({success:function(i){e(i)},fail:function(i){e(i)}})},readLocalFile:function(e,i){plus.io.resolveLocalFileSystemURL(e,(function(t){!function(e,i,t){if(e){var o=new plus.io.FileReader;o.onloadend=function(e){var o=U(e.target.result,i.name),l=URL.createObjectURL(o);t&&t(o,l)},o.readAsDataURL(i)}}(e,t,i)}),(function(e){alert("Resolve file URL failed: "+e.message)}))},name:"GisqUpload",components:{gisqSheet:p,dialogBar:k},props:{files:Array,onBeforeDeleted:Function,onBeforeAdded:Function,onDeleted:Function,onAdded:Function,onCustomPrewer:{type:Function,default:void 0}},watch:{files:{deep:!0,immediate:!0,handler(e,i){if(this.files){if(0==this.files.length)return console.log(1),void this.refresh();this.addedFileMap=new Map,this.fileMap=new Map;for(var t=0;t<this.files.length;t++){var o=this.getFileType(this.files[t]),l=this.files[t];console.log(o),"video"==o?this.dealVideo(l,"video"):this.updateFileMap(l,l,o,"","show")}}}}},data:()=>({delKey:"",showDelDialog:!1,fileMapStateTrack:0,gisqVideoUrl:"",showMaskDialog:!1,videoHeight:240,videoWidth:400,isHbuilder:!1,currentValue:!1,iTitle:"类型选择",iLeft:"取消",iShow:!1,sheetItems:[{id:1,name:"拍照"},{id:2,name:"选取图片"},{id:3,name:"选取视频"}],addedFileMap:new Map,fileMap:new Map,index:0,showViewer:!1,bigSrc:"",srcList:[],zoomOptions:{inline:!1,button:!0,navbar:!1,title:!1,toolbar:{zoomIn:0,zoomOut:0,oneToOne:0,reset:0,prev:0,play:0,next:0,rotateLeft:0,rotateRight:0,flipHorizontal:0,flipVertical:0},tooltip:!1,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!1,fullscreen:!0,keyboard:!0}}),methods:{dealVideo:function(e,i){var t=this;this.getVideoBase64(e).then((function(o){t.updateFileMap(e,e,i,o,"show")}))},refresh:function(){this.addedFileMap=new Map,this.fileMap=new Map,this.$forceUpdate(),this.onChange()},clickCancel:function(){this.delKey=""},clickDanger:function(){this.deleteSelectedFile(this.delKey),this.delKey=""},clickConfirm:function(){},getFileType:function(e){var i="picture";if(e){var t=e.split(".");if(t.length>=2){var o=t[t.length-1].toLowerCase();"mp4"!==o&&"mov"!==o&&"avi"!==o&&"wmv"!==o&&"3gp"!==o&&"mkv"!==o&&"rmvb"!==o&&"webm"!==o&&"flv"!==o&&"qsv"!==o||(i="video")}}return i},showSheet:function(){this.iShow=!0},clickOnSheet:function(e){if(1==this.isHbuilder)try{plus.android.importClass("com.zjzs.gisq.jetpack.aar_camara.CamaraActivity");1==e.id?this.takePhoto():3==e.id?this.chooseVideoH5():this.choosePhoto()}catch(i){1==e.id?this.takePhotoH5():3==e.id?this.chooseVideoH5():this.choosePhotoH5()}else 1==e.id?this.takePhotoH5():3==e.id?this.chooseVideoH5():this.choosePhotoH5()},takePhotoH5:function(){var e=this.$refs.gisqLibUploadInputFileH5,i=this;e.onchange=function(e){i.handleH5InputChange(this.files)},e.click()},chooseVideoH5:function(){var e=this,i=this.$refs.gisqLibUploadInputFileVideoH5;i.onchange=function(i){e.handleH5InputChange(this.files)},i.click()},choosePhotoH5:function(){var e=this,i=this.$refs.gisqLibUploadInputFileH5;i.onchange=function(i){e.handleH5InputChange(this.files)},i.click()},handleH5InputChange:function(e){if(e){console.log(e);for(var i=0;i<e.length;i++)this.readH5File(e[i])}},readH5File:function(e){var i=URL.createObjectURL(e),t=this.getFileType(e.name),o=this;"video"===t?o.getVideoBase64(i).then((function(l){o.updateFileMap(e.name,i,t,l,"add",e)})):o.updateFileMap(e.name,i,t,"","add",e)},takePhoto:function(){var e=this;if(1==e.isHbuilder){var i=plus.android.runtimeMainActivity(),t=new(plus.android.importClass("android.content.Intent"))(i,plus.android.importClass("com.zjzs.gisq.jetpack.aar_camara.CamaraActivity").class);i.onActivityResult=function(i,t,o){if(100==i){plus.android.importClass(o);var l=o.getExtras();plus.android.importClass(l);var s=l.getString("addphoto"),n=JSON.parse(s);for(var a in n)e.parseFile("file://"+n[a].path)}},i.startActivityForResult(t,100)}},choosePhoto:function(){var e=this;1==e.isHbuilder&&(console.log("从相册中选择多张图片:"),plus.gallery.pick((function(i){for(var t in i.files)e.parseFile(i.files[t])}),(function(e){console.log("取消选择图片")}),{filter:"image",multiple:!0,maximum:1e5,system:!1,onmaxed:function(){plus.nativeUI.alert("最多只能选择4张图片")}}))},parseFile:function(e){var i=this;if(1==i.isHbuilder&&e){e.split(".");var t;if(t=i.getFileType(e),e.indexOf("http")>=0)return void("video"===t?this.getVideoBase64(e).then((function(o){console.log(111),i.updateFileMap(e,e,t,dataUrl,"add")})):i.updateFileMap(e,e,t,"","add"));i.readLocalFile(e,t)}},readFile:function(e,i,t){var o=this;if(1==o.isHbuilder&&e){var l=new plus.io.FileReader;l.onloadend=function(l){var s=U(l.target.result,t.name),n=URL.createObjectURL(s);"video"===i?o.getVideoBase64(n).then((function(t){o.updateFileMap(e,n,i,t,"add",s)})):o.updateFileMap(e,n,i,"","add",s)},l.readAsDataURL(t)}},readLocalFile:function(e,i){var t=this;plus.io.resolveLocalFileSystemURL(e,(function(o){t.readFile(e,i,o)}),(function(e){alert("Resolve file URL failed: "+e.message)}))},updateFileMap:function(e,i,t,o,l,s){this.beforeAdded(e);var n=!1;0==e.indexOf("http")&&(n=!0);var a={src:i,poster:o,type:t,actionType:l,isServer:n};if(this.fileMap.set(e,a),this.fileMapStateTrack++,"add"===l){var d=s||i;this.addedFileMap.set(e,d),this.addedFile(e),this.onChange()}this.$forceUpdate()},plusReady:function(e){window.plus?e():document.addEventListener("plusready",e)},showDelDialogAction:function(e,i){console.log(12334),this.showDelDialog=!0,console.log(this.showDelDialog),this.delKey=e,i.stopPropagation()},deleteSelectedFile:function(e){this.$refs.gisqLibUploadInputFileH5.value="",this.fileMap.get(e),this.beforeDeleted(e),this.fileMap.delete(e),this.fileMapStateTrack--,this.$forceUpdate(),this.addedFileMap.delete(e),this.deletedFile(e),this.onChange(),event.stopPropagation()},beforeAdded:function(e){this.$emit("onBeforeAdded",e)},beforeDeleted:function(e){this.$emit("onBeforeDeleted",e)},deletedFile:function(e){this.$emit("onDeleted",e)},addedFile:function(e){this.$emit("onAdded",e,this.addedFileMap.get(e))},onChange:function(){this.$emit("onChange",this.addedFileMap)},handleOpen:function(e,i){var t=e.src;if("video"===e.type)return this.showMaskDialog=!0,this.gisqVideoUrl=t,console.log(t),this.playVideo(this.$refs.gisqLibUploadVideoPlayer,t),void i.stopPropagation();if(1==!!this.onCustomPrewer)return this.onCustomPrewer(t),void i.stopPropagation();this.bigSrc=t,this.showViewer=!this.showViewer;this.$el.querySelector(".zoomimages").$viewer.show()},handleClose:function(){this.showViewer=!1},DrawBetterImage:function(e,i,t){var o,l,s=new Image;s.src=e.src,s.width>0&&s.height>0&&(console.log(1),s.width/s.height>=i/t?(console.log(2),s.width>i?(console.log(3),o=i,l=s.height*i/s.width):(console.log(4),o=s.width,l=s.height)):(console.log(5),s.height>t?(console.log(6),l=t,o=s.width*t/s.height):(console.log(7),o=s.width,l=s.height)),e.height=l,e.width=o,e.alt=s.width+"×"+s.height)},dbPlayVideo(e){var i=this.$refs.gisqLibUploadVideoPlayer;i.requestFullscreen?i.requestFullscreen():i.mozRequestFullScreen?i.mozRequestFullScreen():i.webkitRequestFullScreen&&i.webkitRequestFullScreen(),i.play(e),i.parentNode.childNodes[0].style.display="none"},exitFullscreen(e){var i=this.$refs.gisqLibUploadVideoPlayer;document.exitFullscreen&&""==i.style.objectFit?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen(),i.parentNode.childNodes[0].style.display="block",setTimeout((function(){i.style.objectFit="fill"}),500)},playVideo(e,i){e.style.objectFit="",e.src=i;var t=document.documentElement.clientWidth,o=document.documentElement.clientHeight,l=.92;if(o<t)if(this.videoHeight>this.videoWidth){var s=this.videoWidth/this.videoHeight;e.style.height=o*l+"px",e.style.width=o*l*s+"px"}else{s=this.videoHeight/this.videoWidth;e.style.width=t*l+"px",e.style.height=t*l*s+"px"}else if(this.videoHeight<this.videoWidth){s=this.videoHeight/this.videoWidth;e.style.width=t*l+"px",e.style.height=t*l*s+"px"}else{s=this.videoWidth/this.videoHeight;e.style.height=o*l+"px",e.style.width=o*l*s+"px"}e.play(i)},reSetVideo(e){var i=this.$refs.gisqLibUploadVideoPlayer,t=document.fullscreenElement||document.msFullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||!1,o=this.gisqVideoUrl;i&&!t&&(i.pause(),i.src=o,i.load(),i.currentTime=0,i.style.objectFit="fill",i.parentNode.childNodes[0].style.display="block",i.addEventListener(e,null),i=null)},maskEventDeal:function(e){e.target!=this.$refs.gisqLibUploadVideoPlayer&&e.stopPropagation()},closePlayVideoMask:function(){this.showMaskDialog=!1,this.gisqVideoUrl="",this.$refs.gisqLibUploadVideoPlayer.pause()},onPlayerEnded:function(e){},getVideoBase64:function(e){var i=this;return new Promise((function(t,o){let l="",s=document.createElement("video");s.setAttribute("crossOrigin","anonymous"),s.setAttribute("src",e),s.setAttribute("width",400),s.setAttribute("height",240),s.currentTime=2,s.addEventListener("loadeddata",(function(){console.log(11111);let e=document.createElement("canvas"),o=s.width,n=s.height;i.videoWidth=this.videoWidth,i.videoHeight=this.videoHeight;var a=e.getContext("2d");a.fillStyle="#fff",e.width=o,e.height=n,a.fillRect(0,0,e.width,e.height),a.drawImage(s,0,0,o,n),l=e.toDataURL("image/jpeg"),s.currentTime=0,t(l)}))}))}},mounted(){var e=this;this.plusReady((function(){e.isHbuilder=!0}))},created(){}},V={class:"uploadRoot",style:{}},D={style:{},class:"zoomimages"},L=["onClick","ckey"],x=["src"],P=["onClick","cKey"],I=[t("span",{class:"iconfont-gisqupload icon-shanchu gisqUpload-icon-delete-span",style:{}},null,-1)],R={style:{},class:"gisq-upload-video-icon"},$=[t("i",{class:"iconfont-gisqupload icon-circle-video",style:{"font-size":"2rem",color:"#FFFFFF"}},null,-1)],T=[t("span",{class:"iconfont-gisqupload icon-plus-line"},null,-1)],A={class:"gisqUploadActionSheet"},B={class:"popContainer"},E=["src"],O=[t("i",{class:"iconfont-gisqupload icon-close gisqlib-upload-videomask-closeIcon"},null,-1)],z={hidden:"hidden",type:"file",multiple:"multiple",accept:"image/*,video/*",ref:"gisqLibUploadInputFileH5"},_={hidden:"hidden",type:"file",multiple:"multiple",accept:"video/*",ref:"gisqLibUploadInputFileVideoH5"};H.render=function(o,l,s,p,f,g){const m=r("gisqSheet"),v=r("dialog-bar"),y=h("viewer");return e(),i("div",V,[d(t("div",D,[(e(!0),i(n,null,a(f.fileMap,((o,l)=>(e(),i("div",{style:{},class:"gisq-image-showsmall-div",onClick:e=>g.handleOpen(o[1],e),ckey:f.fileMapStateTrack},[(e(),i("img",{src:"picture"==o[1].type?o[1].src:o[1].poster,key:o[0],class:"gisq-small-image"},null,8,x)),t("div",{style:{},class:"gisqUpload gisqUpload-delete-root-div",onClick:e=>g.showDelDialogAction(o[0],e),cKey:o[0]},I,8,P),d(t("div",R,$,512),[[c,"video"===o[1].type]])],8,L)))),256)),t("div",{style:{},onClick:l[0]||(l[0]=(...e)=>g.showSheet&&g.showSheet(...e)),class:"gisqupload-div-action-plus"},T)],512),[[y,f.zoomOptions]]),t("div",A,[u(m,{p_visiable:f.iShow,"onUpdate:p_visiable":l[1]||(l[1]=e=>f.iShow=e),p_title:f.iTitle,p_sheetItems:f.sheetItems,onClickOnSheet:g.clickOnSheet},null,8,["p_visiable","p_title","p_sheetItems","onClickOnSheet"])]),d(t("div",B,[t("video",{style:{},class:"gisqlib-upload-video",controls:"controls",ref:"gisqLibUploadVideoPlayer",onEnded:l[2]||(l[2]=e=>g.onPlayerEnded(e))},[t("source",{src:f.gisqVideoUrl,type:"video/mp4"},null,8,E)],544),t("div",{class:"gisqlib-upload-videomask-close-div",onClick:l[3]||(l[3]=e=>g.closePlayVideoMask())},O)],512),[[c,f.showMaskDialog]]),t("input",z,null,512),t("input",_,null,512),u(v,{showDialog:f.showDelDialog,"onUpdate:showDialog":l[4]||(l[4]=e=>f.showDelDialog=e),type:"danger",title:"警告!",content:"确定删除图片?",onCancel:l[5]||(l[5]=e=>g.clickCancel()),onDanger:l[6]||(l[6]=e=>g.clickDanger()),onConfirm:l[7]||(l[7]=e=>g.clickConfirm()),dangerText:"删除"},null,8,["showDialog"])])};const j=[H];var W;"undefined"!=typeof window&&window.Vue&&(W=window.Vue,j.forEach((e=>{W.component(e.name,e)})));export{H as GisqUpload};