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

``` npm install ```

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