tdesign-miniprogram/miniprogram_dist/upload/upload.js

TDesign Component for miniprogram

import{__decorate,__rest}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import props from"./props";import config from"../common/config";import{isOverSize,isWxWork,isPC}from"../common/utils";import{isObject}from"../common/validator";import usingConfig from"../mixins/using-config";const{prefix:prefix}=config,componentName="upload";let Upload=class extends SuperComponent{constructor(){super(...arguments),this.behaviors=[usingConfig({componentName:"upload"})],this.externalClasses=[`${prefix}-class`],this.options={multipleSlots:!0},this.data={classPrefix:`${prefix}-upload`,prefix:prefix,current:!1,proofs:[],customFiles:[],customLimit:0,column:4,dragBaseData:{},rows:0,dragWrapStyle:"",dragList:[],dragging:!0,dragLayout:!1},this.properties=props,this.controlledProps=[{key:"files",event:"success"}],this.observers={"files, max, draggable"(e,t){this.handleLimit(e,t)},gridConfig(){this.updateGrid()}},this.lifetimes={ready(){this.updateGrid(),this.handleLimit(this.data.customFiles,this.data.max)}},this.methods={isMediaFile(e){return"image"===e.type||"video"===e.type||this.isImageUrl(e.url)},isPreviewable(e){return this.isMediaFile(e)&&(!e.status||"done"===e.status)},getPreviewMediaSources(){const e=[];return this.data.customFiles.forEach(t=>{if(!this.isPreviewable(t))return;const i={url:t.url,type:t.type,poster:t.thumb||void 0};e.push(i)}),e},getMediaIndex(e){const{customFiles:t}=this.data;let i=0;for(let s=0;s<e;s+=1)this.isPreviewable(t[s])&&(i+=1);return i},onPreview(e){this.onFileClick(e);const{preview:t}=this.properties;if(!t)return;const{file:i}=e.currentTarget.dataset;if(i&&!this.isMediaFile(i))return;const s=this.data.customFiles.some(e=>"video"===e.type);s?this.onPreviewMedia(e):this.onPreviewImage(e)},isImageUrl(e){if(!e)return!1;const t=e.toLowerCase();return["jpg","jpeg","png","gif","bmp","webp","svg","tiff"].some(e=>t.includes(`.${e}`))},onPreviewImage(e){var t;const{index:i}=e.currentTarget.dataset,s=this.data.customFiles.filter(e=>this.isPreviewable(e)).map(e=>e.url),r=null===(t=this.data.customFiles[i])||void 0===t?void 0:t.url;wx.previewImage({urls:s,current:r,fail(){wx.showToast({title:"预览图片失败",icon:"none"})}})},onPreviewMedia(e){const{index:t}=e.currentTarget.dataset,i=this.getPreviewMediaSources(),s=this.getMediaIndex(t);wx.previewMedia({sources:i,current:s,fail(){wx.showToast({title:"预览视频失败",icon:"none"})}})},uploadFiles(e){return Promise.resolve().then(()=>{const t=this.data.requestMethod(e);return t instanceof Promise?t:Promise.resolve({})})},startUpload(e){return"function"==typeof this.data.requestMethod?this.uploadFiles(e).then(()=>{e.forEach(e=>{e.percent=100}),this.triggerSuccessEvent(e)}).catch(e=>{this.triggerFailEvent(e)}):(this.triggerSuccessEvent(e),this.handleLimit(this.data.customFiles,this.data.max),Promise.resolve())},onAddTap(){const{disabled:e,mediaType:t,source:i}=this.properties;e||("media"===i?this.chooseMedia(t):this.chooseMessageFile(t))},chooseMedia(e){const{customLimit:t}=this.data,{config:i,sizeLimit:s}=this.properties;isWxWork||isPC?wx.chooseImage(Object.assign(Object.assign({count:Math.min(20,t)},i),{success:e=>{const t=[];e.tempFiles.forEach(e=>{const{path:i,size:r}=e;if(this.checkFileSize(r,s,"image"))return;const a=this.getRandFileName(i);t.push({name:a,type:"image",url:i,size:r,percent:0})}),this.afterSelect(t)},fail:e=>{this.triggerFailEvent(e)},complete:e=>{this.triggerEvent("complete",e)}})):wx.chooseMedia(Object.assign(Object.assign({count:Math.min(20,t),mediaType:e},i),{success:t=>{const i=[];t.tempFiles.forEach(t=>{const{size:r,fileType:a,tempFilePath:o,width:n,height:l,duration:c,thumbTempFilePath:h}=t,g=__rest(t,["size","fileType","tempFilePath","width","height","duration","thumbTempFilePath"]);if(this.checkFileSize(r,s,a))return;const d=this.getRandFileName(o);i.push(Object.assign({name:d,type:this.getFileType(e,o,a),url:o,size:r,width:n,height:l,duration:c,thumb:h,percent:0},g))}),this.afterSelect(i)},fail:e=>{this.triggerFailEvent(e)},complete:e=>{this.triggerEvent("complete",e)}}))},chooseMessageFile(e){const{customLimit:t}=this.data,{config:i,sizeLimit:s,extension:r}=this.properties;wx.chooseMessageFile(Object.assign(Object.assign(Object.assign({count:Math.min(100,t),type:Array.isArray(e)?"all":e},r&&r.length>0?{extension:r}:{}),i),{success:t=>{const i=[];t.tempFiles.forEach(t=>{const{size:r,type:a,path:o}=t,n=__rest(t,["size","type","path"]);if(this.checkFileSize(r,s,a))return;const l=this.getRandFileName(o);i.push(Object.assign({name:l,type:this.getFileType(e,o,a),url:o,size:r,percent:0},n))}),this.afterSelect(i)},fail:e=>this.triggerFailEvent(e),complete:e=>this.triggerEvent("complete",e)}))},afterSelect(e){this._trigger("select-change",{files:[...this.data.customFiles],currentSelectedFiles:[e]}),this._trigger("add",{files:e}),this.startUpload(e)},dragVibrate(e){var t;const{vibrateType:i}=e,{draggable:s}=this.data,r=null===(t=null==s?void 0:s.vibrate)||void 0===t||t,a=null==s?void 0:s.collisionVibrate;(r&&"longPress"===i||a&&"touchMove"===i)&&wx.vibrateShort({type:"light"})},dragStatusChange(e){const{dragging:t}=e;this.setData({dragging:t})},dragEnd(e){const{dragCollisionList:t}=e;let i=[];i=0===t.length?this.data.customFiles:t.reduce((e,t)=>{const{realKey:i,data:s,fixed:r}=t;return r||(e[i]=Object.assign({},s)),e},[]),this.triggerDropEvent(i)},triggerDropEvent(e){const{transition:t}=this.properties;if(t.backTransition){const i=setTimeout(()=>{this.triggerEvent("drop",{files:e}),clearTimeout(i)},t.duration)}else this.triggerEvent("drop",{files:e})}}}handleLimit(e,t){0===t&&(t=Number.MAX_SAFE_INTEGER),this.setData({customFiles:e.length>t?e.slice(0,t):e,customLimit:t-e.length,dragging:!0}),this.initDragLayout()}triggerSuccessEvent(e){this._trigger("success",{files:[...this.data.customFiles,...e]})}triggerFailEvent(e){this.triggerEvent("fail",e)}onFileClick(e){const{file:t,index:i}=e.currentTarget.dataset;this.triggerEvent("click",{index:i,file:t})}getFileType(e,t,i){if(i)return i;if(1===e.length&&"mix"!==e[0])return e[0];const s=t.split("."),r=s[s.length-1];return["avi","wmv","mkv","mp4","mov","rm","3gp","flv","mpg","rmvb"].includes(r.toLocaleLowerCase())?"video":"image"}getRandFileName(e){const t=e.lastIndexOf("."),i=-1===t?"":e.substr(t);return parseInt(`${Date.now()}${Math.floor(900*Math.random()+100)}`,10).toString(36)+i}checkFileSize(e,t,i){if(isOverSize(e,t)){let e=("video"===i?"视频":"图片")+"大小超过限制";if(isObject(t)){const{size:i,message:s}=t;e=null==s?void 0:s.replace("{sizeLimit}",String(i))}return wx.showToast({icon:"none",title:e}),!0}return!1}onDelete(e){const{index:t}=e.currentTarget.dataset;this.deleteHandle(t)}deleteHandle(e){const{customFiles:t}=this.data,i=t[e];this.triggerEvent("remove",{index:e,file:i})}updateGrid(){let{gridConfig:e={}}=this.properties;isObject(e)||(e={});const{column:t=4,width:i=160,height:s=160}=e;this.setData({gridItemStyle:`width:${i}rpx;height:${s}rpx`,column:t})}resetDragLayout(){this.setData({dragBaseData:{},dragWrapStyle:"",dragLayout:!1})}initDragLayout(){const{draggable:e,disabled:t}=this.properties,{customFiles:i}=this.data;e&&!t&&0!==i.length?(this.initDragList(),this.initDragBaseData()):this.resetDragLayout()}initDragList(){let e=0;const{customFiles:t,customLimit:i}=this.data,s=this.properties.theme,r=this.getDragColumn(),a="list"===s,o=[];if(t.forEach((t,i)=>{o.push({realKey:e,sortKey:i,tranX:i%r*100+"%",tranY:100*Math.floor(i/r)+"%",data:Object.assign({},t)}),e+=1}),i>0&&!a){const e=o.length;o.push({realKey:e,sortKey:e,tranX:e%r*100+"%",tranY:100*Math.floor(e/r)+"%",fixed:!0})}this.data.rows=Math.ceil(o.length/r),this.setData({dragList:o})}getDragSelectors(){const{classPrefix:e}=this.data,t="list"===this.properties.theme;return{itemSelector:t?`.${e}__list-item`:`.${e} >>> .t-grid-item`,wrapSelector:t?`.${e}__list`:`.${e} >>> .t-grid`}}getDragColumn(){return"list"===this.properties.theme?1:this.data.column}getDragItemGap(){if("list"!==this.properties.theme)return 0;return wx.getSystemInfoSync().windowWidth/750*24}initDragBaseData(){const{classPrefix:e,rows:t}=this.data,i=this.getDragColumn(),{itemSelector:s,wrapSelector:r}=this.getDragSelectors(),a=this.createSelectorQuery();a.select(s).boundingClientRect(),a.select(r).boundingClientRect(),a.selectViewport().scrollOffset(),a.exec(s=>{if(!s||!s[0]||!s[1])return;const[{width:r,height:a},{left:o,top:n},{scrollTop:l}]=s,c=a+this.getDragItemGap(),h={rows:t,classPrefix:e,itemWidth:r,itemHeight:c,wrapLeft:o,wrapTop:n+l,columns:i},g=`height: ${t*c}px`;this.setData({dragBaseData:h,dragWrapStyle:g,dragLayout:!0},()=>{const e=setTimeout(()=>{this.setData({dragging:!1}),clearTimeout(e)},0)})})}};Upload=__decorate([wxComponent()],Upload);export default Upload;