From 19d5fa154937406af1dc8dc017a68c04e55e00ca Mon Sep 17 00:00:00 2001 From: zhao_js <349234519@qq.com> Date: 星期二, 21 十一月 2023 15:21:11 +0800 Subject: [PATCH] no message --- H5/utils/ComUtils.js | 8 api/.vs/FxProject/v16/.suo | 0 H5/pages/ad_page/sms_examine.vue | 23 H5/uni_modules/cl-upload/components/cl-upload/cl-upload.vue | 1031 ++++++++++++++++++++++++++++++++++++ H5/uni_modules/cl-upload/readme.md | 253 +++++++++ H5/pages.json | 8 H5/manifest.json | 8 H5/pages/ad_page/wx_pyqset.vue | 126 ++++ H5/uni_modules/cl-upload/package.json | 82 ++ H5/uni_modules/cl-upload/changelog.md | 77 ++ H5/uni_modules/cl-upload/components/cl-image/cl-image.vue | 60 ++ 11 files changed, 1,668 insertions(+), 8 deletions(-) diff --git a/H5/manifest.json b/H5/manifest.json index 4eb6f2a..6eec559 100644 --- a/H5/manifest.json +++ b/H5/manifest.json @@ -86,7 +86,13 @@ "target" : "http://124.70.216.149:8083", //娴嬭瘯鐜 "changeOrigin" : true, //鏄惁璺ㄥ煙 "secure" : true // 鏄惁鏀寔 https 鍗忚鐨勪唬鐞� - } + }, + "/api/" : { + //鏄犲皠鍩熷悕 + "target" : "http://localhost:24147", //娴嬭瘯鐜 + "changeOrigin" : true, //鏄惁璺ㄥ煙 + "secure" : true // 鏄惁鏀寔 https 鍗忚鐨勪唬鐞� + } } } } diff --git a/H5/pages.json b/H5/pages.json index 09a4390..71ab7c2 100644 --- a/H5/pages.json +++ b/H5/pages.json @@ -74,6 +74,14 @@ } }, { + "path": "pages/ad_page/wx_pyqset", + "style": { + "navigationBarTitleText": "鏈嬪弸鍦堣缃�", + "navigationBarTextStyle": "black", + "navigationBarBackgroundColor": "#ffffff" + } + }, + { "path": "pages/ad_page/trans", "style": { "navigationStyle": "custom", diff --git a/H5/pages/ad_page/sms_examine.vue b/H5/pages/ad_page/sms_examine.vue index 5063eeb..564aef2 100644 --- a/H5/pages/ad_page/sms_examine.vue +++ b/H5/pages/ad_page/sms_examine.vue @@ -1,5 +1,10 @@ <template> <view class="container" style="height: auto;"> + <view style="margin: 0.5rem;"> + <button class="mini-btn" style="background-color: cornflowerblue; margin-right: 10px;" type="primary" size="mini">鐭俊瀹℃牳</button> + <button @click="toPyq()" class="mini-btn" type="default" size="mini">寰俊鏈嬪弸鍦�</button> + </view> + <v-tabs v-model="currentTab" :tabs="tabList" :pills="true" line-height="0" activeColor="#fff" @change="changeTab" pillsColor="#FF928F" :fixed="true"></v-tabs> <cc-pullScroolView class="pullScrollView" ref="pullScroll" :enablePullDown="false" :back-top="false"> @@ -97,12 +102,11 @@ curPageNum: 1, pageCount: 10, totalNum: 0, - checkType: '', - whiteid: "ocUrg6nVVPhn-m6yNPg7igYnB64g,ocUrg6ud9UqAdLpqnA2sSf24EFd4,ocUrg6klrlpbPTnzMDr6R8WDmOXU,ocUrg6qawIzxqqzOHYy2a9YSfx_0" + checkType: '' } }, onLoad(option) { - this.checkId(); + //this.checkId(); }, // 涓婃媺鍔犺浇 @@ -115,16 +119,23 @@ } }, methods: { + toPyq() + { + uni.navigateTo({ + url:'/pages/ad_page/wx_pyqset' + }) + }, //妫�鏌ョ櫧鍚嶅崟 checkId() { - var openId = uni.getStorageSync('smsopenid'); - if (openId == "" || this.whiteid.indexOf(openId) < 0) { + var openId = uni.getStorageSync('smsopenid'); + var whiteid=comUtils.getSmsStatus(status); + if (openId == "" || whiteid.indexOf(openId) < 0) { uni.reLaunch({ url: '/pages/emptypage/nopermissions' }) } else { this.getTemplateData(); - } + } }, copy(taskid) { uni.setClipboardData({ diff --git a/H5/pages/ad_page/wx_pyqset.vue b/H5/pages/ad_page/wx_pyqset.vue new file mode 100644 index 0000000..e094eda --- /dev/null +++ b/H5/pages/ad_page/wx_pyqset.vue @@ -0,0 +1,126 @@ +<template> + <view class="container" style="height: auto;"> + <view style="margin: 0.5rem;"> + <button class="mini-btn" style="margin-right: 10px;" type="default" size="mini">鐭俊瀹℃牳</button> + <button class="mini-btn" style="background-color: cornflowerblue;" type="primary" size="mini">寰俊鏈嬪弸鍦�</button> + </view> + <view style="display: flex;justify-content: center; flex-direction: column; /"> + <view> + <textarea maxlength="492" v-model="content" class="smstxt" placeholder="璇疯緭鍏ユ湅鍙嬪湀鏂囨" + placeholder-class="text-color-assist font-size-base"></textarea> + </view> + <view> + <textarea maxlength="492" v-model="commnet" class="smstxt" placeholder="璇疯緭鍏ヨ瘎璁�(闈炲繀濉�)" + placeholder-class="text-color-assist font-size-base"></textarea> + </view> + <view> + <cl-upload action="/api/automanage/uploadpublicfile" @onSuccess="onSuccess" v-model="list" :listStyle="{ + columns: 2, + columnGap: '20rpx', + rowGap:'20rpx', + padding:'10rpx', + height:'300rpx', + radius:'20rpx' + }"> + <template v-slot:addImg> + <view class="newAddImg"> + <view>锛�</view> + <text>娣诲姞</text> + </view> + </template> + </cl-upload> + </view> + </view> + <view style="text-align: center;margin-top: 3rem;"> + <button @click="addSet()" + style="width: 10rem;height: 3rem; line-height: 3rem; font-size: 20px; color: #fff; background: green;" + class="mini-btn" type="default" size="mini">鎻愪氦</button> + </view> + </view> +</template> + +<script> + import comUtils from '@/utils/ComUtils.js' + export default { + data() { + return { + content: '', + list: [], + commnet: '' + } + }, + onLoad(option) { + //this.checkId(); + }, + + methods: { + //妫�鏌ョ櫧鍚嶅崟 + checkId() { + var openId = uni.getStorageSync('smsopenid'); + var whiteid = comUtils.getSmsStatus(status); + if (openId == "" || whiteid.indexOf(openId) < 0) { + uni.reLaunch({ + url: '/pages/emptypage/nopermissions' + }) + } else { + this.getTemplateData(); + } + }, + onSuccess(reslut) { + // 鎶婃湇鍔$杩斿洖鐨勫浘鐗囧湴鍧�娣诲姞鍒發ist涓笌缁勪欢鏁版嵁鍚屾 + this.list.push(reslut.result) + }, + addSet() { + var param = { + Content: this.content, + PicList: this.list, + Commnet: this.commnet + } + var that=this; + that.$http.post('/api/AutoManage/AddPyq', param).then(e => { + uni.hideLoading(); + if (e.result) { + uni.showToast({ + title: '鎿嶄綔鎴愬姛锛�', + icon: 'none' + }); + that.content=''; + that.list=[]; + that.commnet=''; + } else { + uni.showToast({ + title: '鎿嶄綔澶辫触锛�', + icon: 'none' + }); + } + }).catch(function(err) { + uni.hideLoading() + console.log(err); + }) + } + } + } +</script> + +<style lang="scss" scoped> + page { + background: #fff; + height: 100%; + } + + .smstxt { + width: 90%; + margin-top: 2rem; + border: 1px solid; + } + + .newAddImg { + width: 8rem; + border: 1px solid; + height: 8rem; + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; + } +</style> \ No newline at end of file diff --git a/H5/uni_modules/cl-upload/changelog.md b/H5/uni_modules/cl-upload/changelog.md new file mode 100644 index 0000000..123de9b --- /dev/null +++ b/H5/uni_modules/cl-upload/changelog.md @@ -0,0 +1,77 @@ +## 1.4.0锛�2023-07-04锛� +鏂板unicloud鍚敤鐩綍閫夐」 +## 1.3.9锛�2023-06-28锛� +淇灞炴�ч�夋嫨鍣ㄨ鍛婃彁绀� +## 1.3.8锛�2023-06-02锛� +鎵嬪姩涓婁紶娌℃湁鍙笂浼犳枃浠舵椂杩斿洖绌烘暟缁�; 鎻愰珮浠g爜璐ㄩ噺鍜屽彲闃呰鎬�; +## 1.3.7锛�2023-05-22锛� +鏂板鑷畾涔夎棰戝皝闈㈤厤缃�; 鏂板娣诲姞鎸夐挳鎻掓Ы +## 1.3.6锛�2023-05-22锛� +娣诲姞鑷畾涔夊浘鐗囪祫婧愰厤缃� +## 1.3.5锛�2023-05-04锛� +淇灏忕▼搴廲loudType涓簅ther鐨勬椂鍊欒幏鍙栦笉鍒拌棰戝垹闄ゆ寜閽劍鐐归棶棰� +## 1.3.4锛�2023-04-27锛� +淇灏忕▼搴弖nicloud鑷姩涓婁紶涓嶈嚜鍔ㄥ悓姝ユ暟鎹棶棰� +## 1.3.3锛�2023-04-27锛� +淇鍒犻櫎鎸夐挳灞傜骇闂 +## 1.3.2锛�2023-04-24锛� +淇瀹夊崜APP閰嶇疆cloudType:other 鏃犳硶鏄剧ずhttp灏侀潰闂 +## 1.3.1锛�2023-04-19锛� +淇敼鐗堟湰淇℃伅 +## 1.3.0锛�2023-04-19锛� +淇鎵嬪姩涓婁紶宸茬煡闂; 鏂板鍒犻櫎鍓嶏紝涓婁紶鍓嶉挬瀛愬嚱鏁� +## 1.2.9锛�2023-03-22锛� +淇宸茬煡闂 +## 1.2.8锛�2023-03-22锛� +淇宸茬煡闂 +## 1.2.7锛�2023-03-21锛� +淇閮ㄥ垎瑙嗛灏侀潰鐧藉睆闂 +## 1.2.6锛�2023-03-21锛� +淇閮ㄥ垎瑙嗛灏侀潰鐧藉睆闂 +## 1.2.5锛�2023-03-08锛� +鍏煎vue3涓璿-model鏁版嵁缁戝畾 +## 1.2.4锛�2023-03-06锛� +1.淇浣庣増鏈井淇″皬绋嬪簭video鍥惧眰鍏煎闂; +2.淇unicloud涓婁紶v-model涓嶅悓姝ラ棶棰�; +## 1.2.3锛�2023-02-02锛� +娣诲姞闄愬埗鍥剧墖瑙嗛澶у皬鍔熻兘 +## 1.2.2锛�2023-02-01锛� +鍏煎鏀粯瀹濆皬绋嬪簭鎵嬪姩涓婁紶瑙嗛 +## 1.2.1锛�2023-01-31锛� +鏇存柊鍥剧墖璧勬簮鍦板潃 +## 1.2.0锛�2022-12-12锛� +鍏煎uniCloud涓婁紶 +## 1.1.9锛�2022-12-12锛� +1. 娣诲姞鏈�澶ц棰戦檺鍒� +2. 浼樺寲閮ㄥ垎鍔熻兘 +## 1.1.8锛�2022-12-09锛� +淇閮ㄥ垎璁惧涓婁紶瑙嗛绗竴甯ч粦灞忛棶棰� +## 1.1.7锛�2022-12-01锛� +淇h5涓婁紶寮�鍚帇缂╁悗涓�鐩存樉绀衡�滄鍦ㄥ帇缂╀腑鈥濋棶棰� +## 1.1.6锛�2022-11-24锛� +鍏煎鏀粯瀹濆皬绋嬪簭鎵嬪姩涓婁紶 +## 1.1.5锛�2022-11-07锛� +娣诲姞鍔犺浇閰嶇疆 +## 1.1.4锛�2022-11-07锛� +淇鍥剧墖闄愬埗鏁伴噺鍚庡彲浠ュ娆¢�夋嫨鏈�澶ф暟閲忓浘鐗囬棶棰� +## 1.1.3锛�2022-10-28锛� +娣诲姞鎻愮ず寮圭獥閰嶇疆 +## 1.1.1锛�2022-10-28锛� +淇宸茬煡闂 +## 1.1.0锛�2022-08-25锛� +淇base64鍘嬬缉闂 +## 1.0.9锛�2022-08-25锛� +淇鏈嶅姟鍣ㄨ繑鍥炴暟鎹牸寮忛棶棰� +## 1.0.8锛�2022-08-01锛� +浼樺寲浠g爜鏍煎紡銆侀�昏緫 +## 1.0.6锛�2022-07-30锛� +淇敼宸茬煡闂 +## 1.0.5锛�2022-07-30锛� +1. aspect-ratio鍏煎闂锛屾坊鍔爃eight灞炴�т繚搴� +2. 娣诲姞鐩戝惉涓婁紶杩涘害鍙樺寲浜嬩欢 +## 1.0.3锛�2022-07-30锛� +娣诲姞鎸夐挳鎺у埗锛屼簨浠惰鏄� +## 1.0.2锛�2022-07-30锛� +浼樺寲鏈嶅姟鍣ㄦ帴鍙h繑鍥炴暟鎹笂浼� +## 1.0.1锛�2022-07-29锛� +鍒濆鍖栫粍浠� diff --git a/H5/uni_modules/cl-upload/components/cl-image/cl-image.vue b/H5/uni_modules/cl-upload/components/cl-image/cl-image.vue new file mode 100644 index 0000000..61fc4eb --- /dev/null +++ b/H5/uni_modules/cl-upload/components/cl-image/cl-image.vue @@ -0,0 +1,60 @@ +<template> + <image class="image" :src="imgSrc" mode="aspectFill" :disabled="false" :controls='false' @error="imgerror"></image> +</template> + +<script> + export default { + props: { + src: { + type: String, + default: '' + }, + cloudType: { + type: String, + default: 'oss' + }, + }, + data() { + return { + imgSrc: '' + }; + }, + mounted() { + this.setCloudFunction() + }, + methods: { + imgerror(even) { + this.imgSrc = `https://mp-61599c79-d7ee-4a75-a24b-e5a288da6dd3.cdn.bspapp.com/cloudstorage/887c60f0-27f8-46d1-8769-2c45be0f3d7d.png` + }, + setCloudFunction() { + const fileType = this.src.split('.').pop(); + const IMAGE_REGEXP = /(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg|image)/i + if (IMAGE_REGEXP.test(fileType)) { + return this.imgSrc = this.src; + } + + switch (this.cloudType){ + case 'oss': + this.imgSrc = this.src + '?x-oss-process=video/snapshot,t_0,f_jpg' + break; + case 'process': + this.imgSrc = this.src + '?ci-process=snapshot&time=0.01' + break; + case 'vframe': + this.imgSrc = this.src + '?vframe/jpg/offset/0' + break; + default: + this.imgSrc = this.src + break; + } + } + } + } +</script> + +<style lang="scss" scoped> + .image { + width: 100%; + height: 100%; + } +</style> diff --git a/H5/uni_modules/cl-upload/components/cl-upload/cl-upload.vue b/H5/uni_modules/cl-upload/components/cl-upload/cl-upload.vue new file mode 100644 index 0000000..ee28b16 --- /dev/null +++ b/H5/uni_modules/cl-upload/components/cl-upload/cl-upload.vue @@ -0,0 +1,1031 @@ +<template> + <view class="cl-updata"> + <view class="file-list" :style="[listRowStyle]"> + + <view v-for="(item, index) in previewList" @tap="clickSelectedFile(item, index)" class="file-list-row" + :style="[rowStyle]" :key="index"> + + <image + class="_image" + v-if="fileUrlType(item) === 'image'" + :src="item.path" + :style="[imgStyle]" + mode="aspectFill"> + </image> + + <view v-else class="_video" :style="[imgStyle]"> + + <!-- #ifdef MP-WEIXIN || MP-ALIPAY --> + <video + v-if="!autoUpload || cloudType === 'other'" + class="_video" + :style="[imgStyle]" + :src="item.path" + :show-center-play-btn="false" + :show-fullscreen-btn="false" + :show-play-btn="false" + :show-loading="false" + :enable-progress-gesture="false" + :controls="false"> + <view @tap="previewVideo(item, index)" class="play"> + <image style="width: 100%;" :src="playImg" mode="widthFix"></image> + </view> + </video> + + <!-- #endif --> + + <!-- #ifdef APP-PLUS --> + <video + v-if="cloudType === 'other'" + class="_video" + :style="[imgStyle]" + :src="item.path" + :poster="item.path" + :controls="false" + :show-center-play-btn="false" + :show-fullscreen-btn="false" + :show-play-btn="false" + :show-loading="false" + :enable-progress-gesture="false"> + <cover-image class="app_play" :src="playImg" @tap="previewVideo(item, index)"></cover-image> + <cover-view class="remove" v-if="remove" @tap="deleteSelectedFile(item, index)"> + <cover-image class="image" :src="deleteImg" mode="widthFix" @tap="deleteSelectedFile(item, index)"></cover-image> + </cover-view> + </video> + <!-- #endif --> + + <!-- #ifndef MP-WEIXIN || MP-ALIPAY || APP-PLUS --> + <video + v-if="cloudType === 'other'" + class="_video" + :autoplay="false" + :style="[imgStyle]" + :src="item.path" + :controls="false" + :show-center-play-btn="false" + :show-fullscreen-btn="false" + :show-play-btn="false" + :show-loading="false" + :enable-progress-gesture="false" > + <cover-view @tap="previewVideo(item, index)" class="play"> + <cover-image style="width: 100%;" :src="playImg" mode="widthFix"></cover-image> + </cover-view> + </video> + + <!-- #endif --> + + <template v-else> + <cl-image class="pay" :style="[imgStyle]" :cloudType="cloudType" + :src="(item.poster || item.path)"></cl-image> + + <view class="play" @tap="previewVideo(item, index)"> + <image class="play-img" :src="playImg" mode="widthFix"></image> + </view> + </template> + + </view> + + <view class="remove" v-if="remove" @tap.stop="deleteSelectedFile(item, index)"> + <image class="image" :src="deleteImg" mode="widthFix"></image> + </view> + </view> + + <view v-if="add && FileList.length < max" @tap="selectFileTypeOnAdd" :style="[rowStyle]" class="file-list-row"> + <slot name="addImg"> + <div class="add-image"> + <image class="_image" :src="addImg" mode="widthFix"></image> + </div> + </slot> + </view> + </view> + + + <view v-if="tempVideoUrl" class="mask"> + <image @tap="tempVideoUrl = ''" class="_root" :src="closeImg" mode="widthFix"></image> + + <view class="block" @tap.stop> + <video class="block_video" autoplay :src="tempVideoUrl"></video> + </view> + </view> + </view> +</template> + +<script> +import ClImage from '../cl-image/cl-image.vue' +export default { + name: "cl-upload", + components: { ClImage }, + props: { + //鍙楁帶鍥剧墖鍒楄〃 + // #ifdef VUE2 + value: { + type: Array, + default: () => [], + }, + // #endif + + // #ifdef VUE3 + modelValue: { + type: Array, + default: () => [], + }, + // #endif + + // 瀛樺偍浜戠被鍨� oss闃块噷浜� vframe涓冪墰浜� process鑵捐浜� other鍏朵粬 + cloudType: { + type: String, + default: 'oss' + }, + // 鏍囪瘑绗�,鍗冲悗绔帴鍙e弬鏁板悕 + fileName: { + type: String, + default: 'file' + }, + // 鏂囦欢绫诲瀷 'image', 'video', 'all' + fileType: { + type: String, + default: 'all' + }, + // 涓婁紶鍥剧墖鍙傛暟 + imageFormData: { + type: Object | null, + default: () => { } + }, + // 涓婁紶瑙嗛鍙傛暟 + videoFromData: { + type: Object, + default: () => { } + }, + + // 蹇呴�夊弬鏁帮紝涓婁紶鐨勫湴鍧� + action: { + type: String, + default: '' + }, + + // 鍚敤鐩綍, 浠卽nicloud闃块噷浜戞敮鎸� + // https://uniapp.dcloud.net.cn/uniCloud/storage.html#storage-dir + cloudPathAsRealPath: { + type: Boolean, + default: false + }, + + // 璁剧疆涓婁紶鐨勮姹傚ご閮� + headers: { + type: Object, + default: () => { } + }, + + // 涓婁紶鏃堕檮甯︾殑棰濆鍙傛暟 + data: { + type: Object, + default: () => { } + }, + + // 鏄惁寮�鍚瑙堝浘鐗� + isPreviewImage: { + type: Boolean, + default: true + }, + + // 鍥剧墖鎸囩ず鍣ㄦ牱寮忥紝鍙彇鍊硷細"default" - 搴曢儴鍦嗙偣鎸囩ず鍣紱 "number" - 椤堕儴鏁板瓧鎸囩ず鍣紱 "none" - 涓嶆樉绀烘寚绀哄櫒銆� + indicator: { + type: String, + default: 'none' + }, + // 鏄惁鍦ㄩ�夊彇鏂囦欢鍚庣珛鍗宠繘琛屼笂浼� + autoUpload: { + type: Boolean, + default: true + }, + // 鏄惁鏄剧ず鍒犻櫎鎸夐挳 + remove: { + type: Boolean, + default: true + }, + // 鏄惁娣诲姞鎸夐挳 + add: { + type: Boolean, + default: true + }, + // 鏈�澶氭樉绀烘暟閲� + max: { + type: Number, + default: 9 + }, + // 瑙嗛鏈�澶т笂浼犳暟閲� + maxVideo: { + type: Number, + default: 0 + }, + // 鍒楄〃鏍峰紡 + listStyle: { + type: Object, + default: () => { } + }, + // 鍒犻櫎鎻愮ず寮圭獥鏍囬 + deleteTitle: { + type: String, + default: '鎻愮ず' + }, + // 鍒犻櫎鎻愮ず寮圭獥鏂囨 + deleteText: { + type: String, + default: '鎮ㄧ‘璁よ鍒犻櫎鍚楋紵' + }, + // 鍔犺浇鏂囨 + loadingText: { + type: String, + default: '姝e湪涓婁紶涓�...' + }, + // 鏄惁寮�鍚垹闄ゅ墠閽╁瓙 + useBeforeDelete: { + type: Boolean, + default: false + }, + // 鏄惁寮�鍚笂浼犲墠閽╁瓙 + useBeforeUpload: { + type: Boolean, + default: false + }, + // 娣诲姞鎸夐挳鍥剧墖 + addImg: { + type: String, + default: 'https://mp-61599c79-d7ee-4a75-a24b-e5a288da6dd3.cdn.bspapp.com/cloudstorage/bb1550b3-e0a8-4a90-a86f-00f8c6afa9fb.png' + }, + // 鎾斁鎸夐挳鍥剧墖 + playImg: { + type: String, + default: 'https://mp-61599c79-d7ee-4a75-a24b-e5a288da6dd3.cdn.bspapp.com/cloudstorage/ae40402f-aa53-4344-b553-2322799bebd6.png' + }, + // 鍒犻櫎鎸夐挳鍥剧墖 + deleteImg: { + type: String, + default: 'https://mp-61599c79-d7ee-4a75-a24b-e5a288da6dd3.cdn.bspapp.com/cloudstorage/d20177a5-417e-4c5d-a266-1988361c543d.png' + }, + // 鍏抽棴瑙嗛鎸夐挳鍥剧墖 + closeImg: { + type: String, + default: 'https://mp-61599c79-d7ee-4a75-a24b-e5a288da6dd3.cdn.bspapp.com/cloudstorage/cde4362d-7ec7-4cac-a692-12e1f576be1e.png' + }, + }, + data() { + return { + // 娓叉煋鍒楄〃 + FileList: [], + + // 棰勮瑙嗛鍦板潃 + tempVideoUrl: '', + + // 涓存椂鏂囦欢鍒楄〃 + tempFile_paths: [], + + }; + }, + watch: { + // #ifdef VUE2 + 'value': { + handler: function (newVal, oldVal) { + this.FileList = newVal; + }, + deep: true, + immediate: true + }, + // #endif + + // #ifdef VUE3 + 'modelValue': { + handler: function (newVal, oldVal) { + this.FileList = newVal; + }, + deep: true, + immediate: true + }, + // #endif + }, + computed: { + previewList() { + return this.FileList.map(item => { + return { + path: item.path || item, + poster: item.poster || '' + } + }) + }, + listRowStyle() { + const style = { + 'grid-template-columns': `repeat(${this.listStyle?.columns || 4}, 1fr)`, // 姣忚鏁伴噺 + 'grid-column-gap': this.listStyle?.columnGap || '40rpx', // 琛岄棿璺� + 'grid-row-gap': this.listStyle?.rowGap || '40rpx', // 鍒楅棿璺� + 'padding': this.listStyle?.padding || '0rpx' // 鍒楄〃鍐呰竟璺� + } + + return style; + }, + rowStyle() { + const { height = '140rpx', ratio } = this.listStyle || {}; + const style = { + 'aspect-ratio': height ? '' : ratio || '1/1', // 鍥剧墖姣斾緥 + 'height': height, + }; + + return style; + }, + + imgStyle() { + const style = { + 'border-radius': this.listStyle?.radius || '6rpx', // 鍥剧墖鍦嗚 + } + return style; + } + }, + methods: { + /** + * 鍒犻櫎宸查�夋嫨鏂囦欢 + * @param {object} item 鏂囦欢淇℃伅 + * @param {number} selectedFileIndex 鏂囦欢绱㈠紩 + * */ + deleteSelectedFile(item, selectedFileIndex) { + + const fileToDelete = this.FileList[selectedFileIndex]; + + // 鍒犻櫎鍓嶉挬瀛� + if (this.useBeforeDelete) { + this.$emit('beforeDelete', fileToDelete, selectedFileIndex, () => { + return deleteFileFromList() + }) + } + + if (!this.useBeforeDelete) { + uni.showModal({ + title: this.deleteTitle, + content: this.deleteText, + success: (res) => { + if (res.confirm) { + deleteFileFromList() + } + } + }); + } + + const deleteFileFromList = () => { + const tempFileIndex = this.tempFile_paths.indexOf(item || item.path); + + if (tempFileIndex > -1) { + this.tempFile_paths.splice(tempFileIndex, 1) + } + + this.FileList.splice(selectedFileIndex, 1) + + // #ifdef VUE2 + this.$emit('input', this.FileList) + // #endif + + // #ifdef VUE3 + this.$emit("update:modelValue", this.FileList); + // #endif + } + + }, + + /** + * 鐐瑰嚮宸查�夋嫨鏂囦欢 + * @param {object} item 鏂囦欢淇℃伅 + * @param {number} index 鏂囦欢绱㈠紩 + * */ + clickSelectedFile(item, index) { + this.previewImage(item?.path ?? item, index); + this.$emit('onImage', { + item, + index + }) + }, + + /** + * 鐐瑰嚮閫夋嫨鍥剧墖鎸夐挳 + * */ + selectFileTypeOnAdd() { + + switch (this.fileType) { + case 'image': + this.handleFileSelection(1); + break; + case 'video': + this.handleFileSelection(2); + break; + case 'all': + uni.showActionSheet({ + itemList: ['鐩稿唽', '瑙嗛'], + success: (res) => { + const tapIndex = res.tapIndex; + if (tapIndex === 0) { + this.handleFileSelection(1); + } else { + this.handleFileSelection(2); + } + }, + fail: (res) => { + console.error(res.errMsg); + } + }); + break; + default: + this.handleFileSelection(1); + break; + } + }, + + + /** + * 浠庢湰鍦伴�夋嫨鏂囦欢銆� + * @param { number } updataType 閫夋嫨绫诲瀷 1:鍥剧墖 2瑙嗛 + * */ + async handleFileSelection(updataType) { + const that = this; + if (updataType === 1) { + + const data = Object.assign({}, { + // 鏈�澶氬彲浠ラ�夋嫨鐨勫浘鐗囧紶鏁帮紝榛樿9 + count: 9, + // 浠呭 mediaType 涓� image 鏃舵湁鏁堬紝鏄惁鍘嬬缉鎵�閫夋枃浠� + // #ifndef MP-TOUTIAO + sizeType: ['original', 'compressed'], + // #endif + // album 浠庣浉鍐岄�夊浘锛宑amera 浣跨敤鐩告満锛岄粯璁や簩鑰呴兘鏈夈�� + sourceType: ['camera', 'album'], + + compress: false + }, this.imageFormData) + + data['count'] = this.max - this.FileList.length + + uni.chooseImage({ + ...data, + success: async (res) => { + let tempFiles = res.tempFiles + const compress = that.imageFormData?.compress || false; + + // 闄愬埗鍥剧墖涓婁紶灏哄 + if (that.imageFormData?.size ?? false) { + const maxSize = that.imageFormData.size * 1024 * 1024 + + tempFiles.map((imgInfo, index) => { + if (imgInfo.size > maxSize) { + tempFiles.splice(index, 1) + that.$emit('onImageSize', imgInfo) + return uni.showToast({ + title: `鍥剧墖鏈�澶т笂浼�${that.imageFormData.size}MB`, + duration: 2000, + icon: 'none' + }); + } + }) + } + + // 寮�鍚帇缂╁浘鐗� + if (compress) { + const compressedImagePathList = tempFiles.map(imageItem => { + return that.compressImage(imageItem.path) + }) + + Promise.all(compressedImagePathList).then(result => { + upload(result); + }) + + } else { + upload(tempFiles); + } + + function upload(tempImages) { + if (that.autoUpload) { + tempImages.map(item => { + that.onBeforeUploadFile(item, 'image') + }) + } else { + that.FileList = [...that.FileList, ...tempImages] + tempImages.map(item => { + that.tempFile_paths.push(item) + }) + } + } + + }, + fail(err) { + console.error('閫夋嫨鍥剧墖澶辫触', err) + that.$emit('onError', err) + } + + }) + } + + if (updataType === 2) { + + // 闄愬埗瑙嗛鏈�澶т笂浼犳暟閲� + const VIDEO_REGEXP = /\.(mp4|flv|avi)/i + const videoList = await that.FileList.filter(item => { + const fileUrl = item?.url ?? item + return VIDEO_REGEXP.test(fileUrl) + }) + + if (that.maxVideo > 0 && videoList.length >= that.maxVideo) { + that.$emit('onVideoMax', that.maxVideo, videoList.length) + return uni.showToast({ + title: '瑙嗛鏁伴噺宸茶秴鍑�', + duration: 2000, + icon: 'none' + }); + } + + const data = Object.assign({}, { + // 鎷嶆憚瑙嗛鏈�闀挎媿鎽勬椂闂达紝鍗曚綅绉掋�傛渶闀挎敮鎸� 60 绉掋�� + maxDuration: 60, + // #ifndef MP-TOUTIAO + // 'front'銆�'back'锛岄粯璁�'back' + camera: "back", + // #endif + + // album 浠庣浉鍐岄�夎棰戯紝camera 浣跨敤鐩告満鎷嶆憚锛岄粯璁や簩鑰呴兘鏈夈�� + sourceType: ['camera', 'album'], + // 鏄惁鍘嬬缉鎵�閫夌殑瑙嗛婧愭枃浠讹紝榛樿鍊间负 true锛岄渶瑕佸帇缂┿�� + compressed: true, + // 'front'銆�'back'锛岄粯璁�'back' + }, this.videoFromData) + + uni.chooseVideo({ + ...data, + success: (res) => { + let tempFilePath = { ...res } + tempFilePath['path'] = res.tempFilePath + + // 闄愬埗瑙嗛涓婁紶灏哄 + if (that.videoFromData?.size ?? false) { + const maxSize = that.videoFromData.size * 1024 * 1024 + + if (tempFilePath.size > maxSize) { + uni.showToast({ + title: `瑙嗛鏈�澶т笂浼�${that.videoFromData.size}MB`, + duration: 2000, + icon: 'none' + }); + return false; + } + + } + if (that.autoUpload) { + that.onBeforeUploadFile(tempFilePath, 'video') + } else { + that.FileList.push(tempFilePath) + that.tempFile_paths.push(tempFilePath) + } + }, + fail(err) { + console.error('閫夋嫨瑙嗛澶辫触', err) + } + + }) + } + }, + + /** + * 涓婁紶鍓嶉挬瀛� + * @param { tempFile } 涓存椂鏂囦欢 + * @return { Promise } + * */ + onBeforeUploadFile(tempFile) { + if (this.useBeforeUpload) { + return this.$emit('beforeUpload', tempFile, () => { + return this.updataFile(tempFile); + }) + } + return this.updataFile(tempFile); + }, + + /** + * 涓婁紶鏂囦欢鍒版湇鍔″櫒 + * @param { tempFile } 涓存椂鏂囦欢 + * @return { Promise } + * */ + updataFile(tempFile) { + const that = this; + const filePath = tempFile.path || tempFile; + const fileType = this.fileUrlType(filePath) == 'image' ? '.png' : '.mp4'; + const fileName = tempFile.name || Date.now() + fileType; + + uni.showLoading({ + title: this.loadingText, + icon: 'loading' + }) + + return new Promise((resolve, reject) => { + // uniCloud涓婁紶 + if (that.action === 'uniCloud') { + + uniCloud.uploadFile({ + cloudPath: String(fileName), + filePath: filePath, + // #ifdef MP-ALIPAY + fileType: fileType, + // #endif + cloudPathAsRealPath: this.cloudPathAsRealPath, + + onUploadProgress: (progressEvent) => { + const percentCompleted = Math.round( + (progressEvent.loaded * 100) / progressEvent.total + ); + that.$emit('onProgress', percentCompleted) + }, + success(result) { + if (that.autoUpload) { + that.FileList.push(result.fileID) + } else { + that.FileList.map((item, index) => { + if (item === filePath || item.path === filePath) { + that.FileList.splice(index, 1, result.fileID) + } + }) + } + + // #ifdef VUE2 + that.$emit('input', that.FileList) + // #endif + // #ifdef VUE3 + that.$emit("update:modelValue", that.FileList); + // #endif + + resolve(result.fileID) + uni.hideLoading(); + that.$emit('onProgress', { + ...result + }) + }, + fail: (error) => { + uni.hideLoading(); + console.error('error', error); + that.$emit('onError', error) + reject(error) + } + }) + return false; + } + + // 鎺ュ彛鏈嶅姟涓婁紶 + const uploadTask = uni.uploadFile({ + url: that.action, + filePath: filePath, + name: that.fileName, + formData: that.data, + header: that.headers, + // #ifdef MP-ALIPAY + fileType: filetype, + // #endif + success: (uploadFileRes) => { + const data = JSON.parse(uploadFileRes.data) + uni.hideLoading(); + that.success(data) + + if (!this.autoUpload) { + that.FileList.map((item, index) => { + if (item === filePath || item.path === filePath) { + that.FileList.splice(index, 1) + } + }) + } + + resolve(data) + }, + fail: (error) => { + uni.hideLoading(); + console.error('error', error); + that.$emit('onError', error) + reject(error) + } + }); + + uploadTask.onProgressUpdate((res) => { + that.$emit('onProgress', { + ...res, + ...tempFile + }) + }); + }) + }, + + /** + * 鎵嬪姩涓婁紶 + * */ + submit() { + + return new Promise((resolve, reject) => { + if (this.tempFile_paths.length <= 0) { + resolve([]) + } + + const uploadedFilePaths = this.tempFile_paths.map(item => { + return this.onBeforeUploadFile(item || item.path) + }) + + Promise.all(uploadedFilePaths).then(res => { + this.tempFile_paths = [] + resolve(res) + }).catch(err => { + reject(err) + }) + }) + + }, + + /** + * 杩斿洖鏁版嵁 + * @param {array} data 涓婁紶鎴愬姛鍚庣殑鏁版嵁 + * @return {array} 杩斿洖鏁版嵁 + * */ + success(data) { + this.$emit('onSuccess', data); + + // 鑷畾涔夋暟鎹粨鏋�-閫夋嫨鎬у紑鍚� + // const list = data.map(item=> { + // return JSON.parse(item).data.link; + // }) + // this.$emit('input', [...this.FileList, ...list]); + }, + /** + * 鍘嬬缉鍥剧墖 + * @param {array} tempFilePaths 涓存椂璺緞鏁扮粍 + * @return {array} 琚帇缂╄繃鐨勮矾寰勬暟缁� + * */ + async compressImage(tempFilePaths) { + const that = this; + + return new Promise((resolve, reject) => { + + if (typeof tempFilePaths !== 'string') { + console.error('鍘嬬缉璺緞閿欒') + reject([]) + } + + uni.showLoading({ + title: '鍘嬬缉涓�...', + icon: 'loading', + }) + + // #ifdef H5 + this.canvasDataURL(tempFilePaths, { + quality: that.imageFormData.quality / 100 + }, (base64Codes) => { + resolve(base64Codes); + uni.hideLoading(); + }) + // #endif + + // #ifndef H5 + uni.compressImage({ + src: tempFilePaths, + quality: that.imageFormData.quality || 80, + success: res => { + resolve(res.tempFilePath); + uni.hideLoading(); + }, + fail(err) { + reject(err); + uni.hideLoading(); + } + }) + // #endif + + }) + }, + + /** + * H5鍘嬬缉鍥剧墖璐ㄩ噺 + * @param {string} path 鍥剧墖璺緞 + * @param {object} obj 鍘嬬缉閰嶇疆 + * @param {function} callback 鍥炶皟鍑芥暟 + * @return {string} base64 + * */ + canvasDataURL(path, obj, callback) { + var img = new Image(); + img.src = path; + img.onload = function () { + var that = this; + // 榛樿鎸夋瘮渚嬪帇缂� + var w = that.width, + h = that.height, + scale = w / h; + w = obj.width || w; + h = obj.height || (w / scale); + var quality = 0.8; // 榛樿鍥剧墖璐ㄩ噺涓�0.8 + //鐢熸垚canvas + var canvas = document.createElement('canvas'); + var ctx = canvas.getContext('2d'); + // 鍒涘缓灞炴�ц妭鐐� + var anw = document.createAttribute("width"); + anw.nodeValue = w; + var anh = document.createAttribute("height"); + anh.nodeValue = h; + canvas.setAttributeNode(anw); + canvas.setAttributeNode(anh); + ctx.drawImage(that, 0, 0, w, h); + // 鍥惧儚璐ㄩ噺 + if (obj.quality && obj.quality <= 1 && obj.quality > 0) { + quality = obj.quality; + } + // quality鍊艰秺灏忥紝鎵�缁樺埗鍑虹殑鍥惧儚瓒婃ā绯� + var base64 = canvas.toDataURL('image/jpeg', quality); + // 鍥炶皟鍑芥暟杩斿洖base64鐨勫�� + callback(base64); + } + }, + + /** + * 棰勮鍥剧墖 + * @param {string, object} item 鏂囦欢淇℃伅 + * */ + previewImage(item) { + if (this.fileUrlType(item) === 'video') return false; + if (!this.isPreviewImage) return false; + + const imgs = this.FileList.filter(item => { + return this.fileUrlType(item) !== 'video' + }).map(item => item?.path ?? item) + const current = imgs.indexOf(item || item.path); + + uni.previewImage({ + current: current, + urls: imgs, + success() { + }, + fail(err) { + console.log(err); + } + }) + }, + + /** + * 棰勮瑙嗛 + * @param {string, object} item 鏂囦欢淇℃伅 + * @param {number} index 绱㈠紩 + * */ + previewVideo(item, index) { + this.$emit('onVideo', { + item, + index + }) + this.tempVideoUrl = item.path; + }, + + /** + * 鏄惁img绫诲瀷 + * @param {string, object} item 鏂囦欢淇℃伅 + * @return {boolean} 鏄惁img绫诲瀷 + * */ + fileUrlType(file) { + const filePath = file.path || file; + + if (this.isBase64(filePath)) return 'image' + + const fileType = filePath.split('.').pop(); + + const IMAGE_REGEXP = /(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg|image)/i + if (IMAGE_REGEXP.test(fileType)) { + return 'image'; + } else { + return 'video'; + } + }, + // 鍒ゆ柇鏄惁鏄痓ase64 + isBase64(str) { + if (str === '' || typeof str !== 'string') return console.error('鏂囦欢璺緞閿欒, base64', str); + return str.includes('blob:') || str.includes('data:image'); + } + } +} +</script> + +<style lang="scss" scoped> +.cl-updata { + + .file-list { + display: grid; + + &-row { + display: inline-flex; + align-items: center; + position: relative; + + .play-img { + width: 100%; + } + + ._image { + height: 100%; + width: 100%; + } + + ._video { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + } + + .video-fixed { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 10rpx; + z-index: 96; + } + + .play { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 30%; + z-index: 95; + } + + .app_play { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 50rpx; + height: 50rpx; + } + + .remove { + position: absolute; + top: 0; + right: 0; + background-color: #373737; + height: 50rpx; + width: 50rpx; + border-bottom-left-radius: 200rpx; + z-index: 97; + + .image { + width: 20rpx; + height: 20rpx; + position: absolute; + right: 12rpx; + top: 12rpx; + } + } + } + + .add-image { + display: flex; + align-items: center; + justify-content: center; + border: 2rpx dashed #ccc; + width: 100%; + height: 100%; + border-radius: 5rpx; + + &:active { + opacity: 0.8; + } + + ._image { + width: 40%; + } + } + } + + .mask { + background-color: #000; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 99; + + .block { + padding: 0 30rpx; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + + .block_video { + width: 100%; + height: 78vh; + } + } + + ._root { + width: 60rpx; + height: 60rpx; + position: absolute; + left: 40rpx; + top: 5vh + } + } +} +</style> diff --git a/H5/uni_modules/cl-upload/package.json b/H5/uni_modules/cl-upload/package.json new file mode 100644 index 0000000..a8e3a0d --- /dev/null +++ b/H5/uni_modules/cl-upload/package.json @@ -0,0 +1,82 @@ +{ + "id": "cl-upload", + "displayName": "涓婁紶鍥剧墖銆佽棰� 鍖呮嫭棰勮銆佸帇缂┿�佹墜鍔ㄤ笂浼犮�乽niCloud涓婁紶 绛夊姛鑳�", + "version": "1.4.0", + "description": "涓婁紶鍥剧墖瑙嗛锛屾敮鎸佹墜鍔ㄨ嚜鍔ㄤ笂浼狅紝鑷畾涔夋牱寮忥紝uniCloud涓婁紶銆侀瑙堬紝鍒犻櫎绛夊姛鑳�", + "keywords": [ + "涓婁紶鍥剧墖锛屼笂浼犺棰戯紝棰勮锛屽垹闄わ紝", + "uniCloud涓婁紶" +], + "repository": "", + "engines": { + "HBuilderX": "^3.5.3" + }, + "dcloudext": { + "type": "component-vue", + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "鏃�", + "data": "鏃�", + "permissions": "鏃�" + }, + "npmurl": "" + }, + "uni_modules": { + "dependencies": [], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y" + }, + "client": { + "Vue": { + "vue2": "y", + "vue3": "y" + }, + "App": { + "app-vue": "u", + "app-nvue": "u" + }, + "H5-mobile": { + "Safari": "y", + "Android Browser": "y", + "寰俊娴忚鍣�(Android)": "y", + "QQ娴忚鍣�(Android)": "y" + }, + "H5-pc": { + "Chrome": "y", + "IE": "y", + "Edge": "y", + "Firefox": "y", + "Safari": "y" + }, + "灏忕▼搴�": { + "寰俊": "y", + "闃块噷": "y", + "鐧惧害": "u", + "瀛楄妭璺冲姩": "y", + "QQ": "u", + "閽夐拤": "u", + "蹇墜": "u", + "椋炰功": "u", + "浜笢": "u" + }, + "蹇簲鐢�": { + "鍗庝负": "u", + "鑱旂洘": "u" + } + } + } + } +} \ No newline at end of file diff --git a/H5/uni_modules/cl-upload/readme.md b/H5/uni_modules/cl-upload/readme.md new file mode 100644 index 0000000..528b5f2 --- /dev/null +++ b/H5/uni_modules/cl-upload/readme.md @@ -0,0 +1,253 @@ +### cl-upload 涓婁紶缁勪欢 + +> 鏀寔鎵嬪姩鑷姩涓婁紶锛屾牱寮忚皟鏁达紝鍙傛暟閰嶇疆锛岄瑙堬紝鍒犻櫎绛夊姛鑳� + + +> `娉ㄦ剰锛氭瘡娆′笂浼犻兘闇�瑕佸洖璋冨嚱鏁版帴鏀跺弬鏁板苟涓旀坊鍔犲埌涓庣粍浠剁粦瀹氱殑鏁扮粍涓互淇濇寔鏁版嵁涓�鑷�,杩欐牱鍋氭槸鍥犱负缁勪欢涓嶇煡閬撴湇鍔$杩斿洖鐨勬暟鎹牸寮忥紝涔熷彲浠ュ湪缁勪欢涓慨鏀筽romise鏍煎紡 涓�鍔虫案閫竊 + +### 娉ㄦ剰浜嬮」 +1. ratio 鍥剧墖姣斾緥灞炴�ч儴鍒嗘墜鏈轰笉鏀寔锛屽彲閫夌敤height灞炴�т唬鏇� +2. 鑷畾涔夋挱鏀炬寜閽儴鍒嗗钩鍙版湁鍏煎鎬ч棶棰橈紝鍙�夋嫨鎬у叧闂� +3. 寮�鍚帇缂╁浘鐗囪繑鍥炵殑涓存椂璺緞娌℃湁灏剧紑锛屽畼鏂筧pi鐨勯棶棰樸�傜湡鏈轰笂娌¢棶棰橈紝涔熷彲浠ュ湪涓婁紶鐨勬椂鍊欐墜鍔ㄦ坊鍔犲熬缂� +4. **瑙嗛鍦板潃蹇呴』`https`, http鍙兘瀵艰嚧鏃犳硶鏄剧ず灏侀潰鍥�** +5. 濡傛灉娌℃潯浠剁敤`https`閭e氨閰嶇疆`cloudType: other` + +### H5浣撻獙鍦板潃 + + +#### list鏁版嵁鏍煎紡 + +1. 鏁扮粍鏍煎紡 +``` +['鍦板潃1','鍦板潃2'] +``` +2. JSON鏍煎紡 +``` +[ + { + path: '鍦板潃1.png', + // 鍏朵粬淇℃伅 + }, + { + path: '鍦板潃2.mp4', + poster: '鑷畾涔夊皝闈�.png' + // 鍏朵粬淇℃伅 + }, + { + path: '鍦板潃3.mp4', + poster: require('../../static/c1.png'), // 灏侀潰涔熷彲浠ユ槸鏈湴鍥剧墖 + // 鍏朵粬淇℃伅 + }, +] +``` + +#### 鍩虹浣跨敤 + +``` +<cl-upload v-model="list" action="璇锋眰鍦板潃" @onSuccess="onSuccess"></cl-upload> + +methods: { + /** + * 鑷姩涓婁紶杩斿洖鐨勬槸涓�寮犲浘鐗囦俊鎭� + * 鎵嬪姩涓婁紶杩斿洖鐨勬槸宸查�変腑鎵�鏈夊浘鐗囨垨鑰呰棰戜俊鎭� + * */ + onSuccess(reslut) { + // 鎶婃湇鍔$杩斿洖鐨勫浘鐗囧湴鍧�娣诲姞鍒發ist涓笌缁勪欢鏁版嵁鍚屾 + this.list.push(reslut.url) + }, +} +``` +### uniCloud涓婁紶 +> 涓�鍙ヤ唬鐮佸疄鐜颁笂浼�,灏辨槸杩欎箞绠�鍗� + +``` +<cl-upload v-model="list" action="uniCloud"></cl-upload> +``` + +### 鑷畾涔夋牱寮� +> 閫氳繃 listStyle 鎺у埗姣忚鏁伴噺銆佹瘮渚嬨�佽闂磋窛銆佸垪闂磋窛绛夊父鐢ㄦ牱寮� + +``` +<cl-upload v-model="list" :listStyle="{ + columns: 2, + columnGap: '20rpx', + rowGap:'20rpx', + padding:'10rpx', + height:'300rpx', + radius:'20rpx' +}"> + <template v-slot:addImg> + <view class="newAddImg"> + <view>锛�</view> + <text >娣诲姞</text> + </view> + </template> +</cl-upload> +``` + +### 棰勮妯″紡 +> 鍏抽棴鏄剧ず娣诲姞鎸夐挳鍜屽垹闄ゆ寜閽� +``` +<cl-upload v-model="list" :add="false" :remove="false"></cl-upload> +``` + +### 鎵嬪姩涓婁紶 + +> 閫氳繃 autoUpload 鍏抽棴鎺夎嚜鍔ㄤ笂浼狅紝鎻愪氦鐨勬椂鍊欓�氳繃 refs 涓诲姩璋冪敤缁勪欢涓婁紶鏂规硶锛岃繑鍥炴湰娆℃彁浜ゆ垚鍔熸湇鍔″櫒杩斿洖鏁版嵁 + +``` +<cl-upload + ref="upload2" + v-model="list2" + :autoUpload="false"></cl-upload> + +<button @tap="submit">鎵嬪姩鎻愪氦</button> + +methods: { + submit() { + /** + * 涓诲姩璋冪敤缁勪欢涓婁紶鏂规硶 + * */ + this.$refs.upload2.submit().then(reslut=>{ + console.log(reslut); // 鏈鎻愪氦鎴愬姛鏈嶅姟鍣ㄨ繑鍥炴暟鎹� + + // 涓婁紶绗笁鏂规湇鍔″櫒闇�瑕佹墜鍔ㄥ悓姝ユ暟鎹� + // 涓婁紶uniCloud鍒欎笉闇�瑕� + const imgUrls = reslut.list.map(imgInfo=> imgInfo.url); + this.list2 = [...this.list2, ...imgUrls] + }) + }, +} +``` + +### 閰嶇疆鍒犻櫎鍓嶅拰涓婁紶鍓嶉挬瀛� +``` +/ ** +* 寮�鍚垹闄ゅ墠閽╁瓙 useBeforeDelete +* 寮�鍚笂浼犲墠閽╁瓙 useBeforeUpload +*/ +<cl-upload v-model="list" + useBeforeDelete + useBeforeUpload + @beforeDelete="beforeDelete" + @beforeUpload="beforeUpload"></cl-upload> + + +methods: { + /** + * 鍒犻櫎鍓嶉挬瀛� + * @param {Object} item 褰撳墠鍒犻櫎鐨勫浘鐗囨垨鑰呰棰戜俊鎭� + * @param {Number} index 褰撳墠鍒犻櫎鐨勫浘鐗囨垨瑙嗛绱㈠紩 + * @param {Function} next 璋冪敤姝ゅ嚱鏁扮户缁墽琛岀粍浠跺垹闄ら�昏緫 + * */ + beforeDelete(item, index, next) { + uni.showModal({ + title: '鎻愮ず淇℃伅', + content: '纭畾瑕佸垹闄よ繖涓枃浠跺槢锛�', + success: res => { + if (res.confirm) { + // 妯℃嫙鏈嶅姟鍣ㄦ帴鍙� + setTimeout(() => { + next(); + }, 1000); + } + } + }); + }, + /** + * 涓婁紶鍓嶉挬瀛� + * @param {Object} tempFile 褰撳墠涓婁紶鏂囦欢淇℃伅 + * @param {Function} next 璋冪敤姝ゅ嚱鏁扮户缁墽琛岀粍浠朵笂浼犻�昏緫 + * */ + beforeUpload(tempFile, next) { + // 鑷繁鐨勪笂浼犻�昏緫 + // 濡傛灉涓嶉渶瑕佽蛋缁勪欢鐨勪笂浼犻�昏緫灏变笉鐢ㄨ皟鐢╪ext(), 浣嗘槸涓婁紶瀹岃鍚屾鍒發ist + } +} +``` + +## API + +| 鍙傛暟 | 璇存槑 | 绫诲瀷 | 榛樿鍊� | 鍙�夊�� | +| --- | --- | --- | --- | --- | +| action | 涓婁紶鍦板潃 | String |-| uniCloud | +| cloudPathAsRealPath | 鍚敤鐩綍, 浠卽nicloud闃块噷浜戞敮鎸乣1.4.0` `HBuilderX 3.8.5` | Boolean |false| true | +| cloudType | 瀛樺偍浜戠被鍨�(鍚勪釜浜戞湇鍔℃埅鍙栧皝闈㈡柟寮忎笉鍚屻�� other閫夐」鏄痸ideo淇濆簳鎵嬫,閮ㄥ垎骞冲彴鏈夊吋瀹规�ч棶棰�) | String |oss| 闃块噷浜�:oss 涓冪墰浜�:vframe 鑵捐浜�:process 鍏朵粬:other | +| headers | 璁剧疆涓婁紶鐨勮姹傚ご閮� | Object | - |- | +| data | 涓婁紶鏃堕檮甯︾殑棰濆鍙傛暟 | Object | - | - | +| fileName| 鏍囪瘑绗�,鍗冲悗绔帴鍙e弬鏁板悕 | String | file | - | +| fileType | 鏂囦欢绫诲瀷 | String | all | 'image', 'video', 'all' | +| imageFormData | 涓婁紶鍥剧墖鍙傛暟 | Object | - | - | +| videoFromData | 涓婁紶瑙嗛鍙傛暟 | Object | - | - | +| listStyle | 鍒楄〃鏍峰紡 |Object | - | - | +| isPreviewImage | 鏄惁寮�鍚瑙堝浘鐗� | Boolean | true |false | +| remove | 鏄惁鏄剧ず鍒犻櫎鎸夐挳 | Boolean | true |false | +| add | 鏄惁娣诲姞鎸夐挳 | Boolean | true |false | +| max | 鏈�澶氭樉绀烘暟閲� | Number | 9 | - | +| maxVideo | 瑙嗛鏈�澶т笂浼犳暟閲� | Number | 涓嶉檺鍒� | - | +| deleteTitle| 鍒犻櫎鎻愮ず寮圭獥鏍囬 | String | 鎻愮ず | - | +| deleteText| 鍒犻櫎鎻愮ず寮圭獥鏂囨 | String | 鎮ㄧ‘璁よ鍒犻櫎鍚楋紵 | - | +| loadingText| 鍔犺浇鏂囨 | String | 姝e湪涓婁紶涓�... | - | +| useBeforeDelete| 鏄惁寮�鍚垹闄ゅ墠閽╁瓙 | Boolean | false | true | +| useBeforeUpload | 鏄惁寮�鍚笂浼犲墠閽╁瓙 | Boolean | false | true | +| addImg| 娣诲姞鎸夐挳鍥剧墖 | String | - | - | +| playImg| 鎾斁鎸夐挳鍥剧墖 | String | - | - | +| deleteImg| 鍒犻櫎鎸夐挳鍥剧墖 | String | - | - | +| closeImg| 鍏抽棴瑙嗛鎸夐挳鍥剧墖 | String | - | - | + +#### imageFormData + +| 鍙傛暟 | 璇存槑 | 绫诲瀷 | 榛樿鍊� | 鍙�夊�� | +| --- | --- | --- | --- | --- | +| count | 鏈�澶氬彲浠ラ�夋嫨鐨勫浘鐗囧紶鏁� | number |9| - | +| sizeType | original 鍘熷浘锛宑ompressed 鍘嬬缉鍥� | array | 榛樿浜岃�呴兘鏈� |- | +| sourceType | 鐩稿唽鎴栬�呯浉鏈� | array | ['camera ', 'album'] | ['camera ', 'album'] | +| compress | 鏄惁寮�鍚浘鐗囧帇缂� | Boolean | false | true | +| quality | 鍘嬬缉璐ㄩ噺 | number | 80 | - | +| size | 鍥剧墖澶у皬 | number | - | 鍗曚綅MB | + +#### videoFromData + +| 鍙傛暟 | 璇存槑 | 绫诲瀷 | 榛樿鍊� | 鍙�夊�� | +| --- | --- | --- | --- | --- | +| maxDuration | 鎷嶆憚瑙嗛鏈�闀挎媿鎽勬椂闂� | number |60| 鏈�澶�60绉� | +| camera | 鍓嶆憚鍍忓ご鍚庢憚鍍忓ご | array | - |- | +| compressed | 鏄惁鍘嬬缉鎵�閫夌殑瑙嗛婧愭枃浠躲�� | Boolean | true |- | +| sourceType | 鐩稿唽鎴栬�呯浉鏈� | array | ['camera ', 'album'] | ['camera ', 'album'] | +| size | 瑙嗛澶у皬 | number | - | 鍗曚綅MB | + +#### listStyle + +| 鍙傛暟 | 璇存槑 | 绫诲瀷 | 榛樿鍊� | 鍙�夊�� | +| --- | --- | --- | --- | --- | +| columns | 姣忚鏁伴噺 | number |4| - | +| columnGap | 琛岄棿璺� | string | '40rpx' |- | +| rowGap | 鍒楅棿璺� | string | '40rpx' |- | +| padding | 鍒楄〃鍐呰竟璺� | string | '0 0rpx' |- | +| ratio | 鍥剧墖姣斾緥 | string | '1/1' | 浣庣増鏈墜鏈轰笉鏀寔,鍙互閫夋嫨height灞炴�� | +| height | 鍥剧墖楂樺害 | string | '140rpx' |- | +| radius | 鍥剧墖鍦嗚 | string | '6rpx' |- | + +#### Events + +| 浜嬩欢鍚� | 璇存槑 | 鍥炶皟鍙傛暟 | +| --- | --- | --- | +| onSuccess | 涓婁紶鎴愬姛 | data: 鏈嶅姟鍣ㄨ繑鍥炴暟鎹� | +| onError | 涓婁紶澶辫触 | error:閿欒淇℃伅 | +| onImage | 鐐瑰嚮鍥剧墖 | item: 鍥剧墖淇℃伅 index: 鍒楄〃绱㈠紩 | +| onVideo | 鐐瑰嚮瑙嗛 | item: 瑙嗛淇℃伅 index: 鍒楄〃绱㈠紩 | +| onProgress | 涓婁紶杩涚▼ | onProgress鍙傛暟璇存槑| +| onVideoMax | 瑙﹀彂瑙嗛鏈�澶ф暟閲忛檺鍒� | maxVideo, fileLength| +| onImageSize | 瑙﹀彂鍥剧墖鏈�澶у昂瀵搁檺鍒� | 鍥剧墖淇℃伅 | +| beforeDelete | 鍒犻櫎鍓嶉挬瀛� | item: 鏂囦欢淇℃伅 index:鏂囦欢绱㈠紩 next:缁х画鎵ц鍒犻櫎閫昏緫 | +| beforeUpload | 涓婁紶鍓嶉挬瀛� | tempFile: 鏂囦欢淇℃伅 next:缁х画鎵ц鍒犻櫎閫昏緫 | + +#### onProgress鍙傛暟璇存槑 +| 浜嬩欢鍚� | 璇存槑 | +| --- | --- | +| progress | 涓婁紶杩涘害鐧惧垎姣� | +| totalBytesSent | 宸茬粡涓婁紶鐨勬暟鎹暱搴� | +| totalBytesExpectedToSend | 棰勬湡闇�瑕佷笂浼犵殑鏁版嵁鎬婚暱搴� | + + +### [閬囧埌闂鎴栬�呰璁� uniapp 鍔犲叆QQ缇� 553291781](https://jq.qq.com/?_wv=1027&k=5UkMN1QX) \ No newline at end of file diff --git a/H5/utils/ComUtils.js b/H5/utils/ComUtils.js index 7056d24..09ece33 100644 --- a/H5/utils/ComUtils.js +++ b/H5/utils/ComUtils.js @@ -29,6 +29,11 @@ return fmt; } +function getAllowdId() +{ + return "ocUrg6nVVPhn-m6yNPg7igYnB64g,ocUrg6ud9UqAdLpqnA2sSf24EFd4,ocUrg6klrlpbPTnzMDr6R8WDmOXU,ocUrg6qawIzxqqzOHYy2a9YSfx_0"; +} + function getSmsStatus(status) { switch (status) { case 0: @@ -80,5 +85,6 @@ getUrlPar, formatDate, getSmsStatus, - getBackSmsStatus + getBackSmsStatus, + getAllowdId } \ No newline at end of file diff --git a/api/.vs/FxProject/v16/.suo b/api/.vs/FxProject/v16/.suo index 27e8cc4..cab742b 100644 --- a/api/.vs/FxProject/v16/.suo +++ b/api/.vs/FxProject/v16/.suo Binary files differ -- Gitblit v1.9.3