From c23bfac611b104097ae45a8d75a185419701cf8e Mon Sep 17 00:00:00 2001 From: ndbs Date: Thu, 27 Oct 2022 14:42:32 +0800 Subject: [PATCH] =?UTF-8?q?app2.0=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/learun-app/upload-file.vue | 167 +++++++++----- .../learun-mpui/learun-ui-mp/upload.vue | 181 +++++++++++++-- .../components/upload-file.vue | 217 ++++++++++++++++++ .../components/upload-file2.vue | 211 +++++++++++++++++ 4 files changed, 704 insertions(+), 72 deletions(-) create mode 100644 Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/upload-file.vue create mode 100644 Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/upload-file2.vue diff --git a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-app/upload-file.vue b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-app/upload-file.vue index 969f835be..2dd1df797 100644 --- a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-app/upload-file.vue +++ b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-app/upload-file.vue @@ -9,7 +9,8 @@ - + + - + - + + + {{file.name}} + @@ -54,8 +58,7 @@ export default { isImgFile(type) { const typeString = (type || '').toLowerCase() - //return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'image'].includes(typeString) - return true; + return ['jpg','image/jpg','jpeg','image/jpeg', 'png', 'image/png','gif', 'image/gif','bmp', 'image/bmp','webp', 'image/webp','image'].includes(typeString) }, isDocFile(type) { @@ -63,12 +66,17 @@ export default { return ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'].includes(typeString) }, - delFile(index) { + async delFile(index,fileId) { + if (!(await this.CONFIRM('删除文件', '确定要删除该文件吗？', true))) { + return + } const newList = JSON.parse(JSON.stringify(this.value)) newList.splice(index, 1) this.$emit('input', newList) this.$emit('change') this.$emit('del') + //物理删除 + this.DELETE_FILE(fileId); }, chooseFile() { @@ -89,60 +97,84 @@ export default { // #endif // #ifndef MP-DINGTALK - uni.chooseImage({ - count: Number(this.number), - sizeType: ['original', 'compressed'], - sourceType: ['album', 'camera'], - success: ({ tempFilePaths }) => { - const newList = JSON.parse(JSON.stringify(this.value || [])).concat( - tempFilePaths//.map(t => ({ path: t, type: this.getFileExt(t) })) - ) - this.$emit('input', newList) - this.$emit('change', newList) - this.$emit('add') - } - }) + // uni.chooseFile({ + // count: Number(this.number), + // sizeType: ['original', 'compressed'], + // sourceType: ['album', 'camera'], + // success: ({ tempFilePaths }) => { + // const newList = JSON.parse(JSON.stringify(this.value || [])).concat( + // tempFilePaths//.map(t => ({ path: t, type: this.getFileExt(t) })) + // ) + // this.$emit('input', newList) + // this.$emit('change', newList) + // this.$emit('add') + // } + // }) + + uni.chooseFile({ + count: Number(this.number), + sizeType: ['original', 'compressed'], + sourceType: ['album', 'camera'], + success: ({ tempFilePaths,tempFiles }) => { + const newList = JSON.parse(JSON.stringify(this.value || [])).concat( + // tempFilePaths//.map(t => ({ path: t, type: this.getFileExt(t) })) + tempFilePaths.map((t,i) => ({ path: t, type: tempFiles[i].type, size:tempFiles[i].size, name:tempFiles[i].name, noUpdated:true} )) + ) + this.$emit('input', newList) + this.$emit('change', newList) + this.$emit('add') + } + }) // #endif }, async fileClick(index) { + // if(typeof this.value[index] == "string"){ + // uni.previewImage({ urls: this.value.filter(item=>typeof this.value[index] == "string"), current: this.value[index] }) + // return + // } const { path, type, uid, size = 0 } = this.value[index] - if (this.isImgFile(type)) { - uni.previewImage({ urls: [path], current: path }) - } else if (this.isDocFile(type)) { - // #ifndef H5 || MP-DINGTALK - if (size >= 50 * 1024 * 1024) { - this.TOAST('小程序端无法下载超过50MB的文件，此文件大小为${size}KB，超过限制') - return - } - // #endif - - // #ifndef MP-DINGTALK - const tempFilePath = await this.HTTP_DOWNLOAD(uid) - uni.openDocument({ filePath: tempFilePath, fileType: type }) - // #endif - - // #ifdef MP-DINGTALK - this.TOAST('钉钉小程序只支持查看图片文件') - // #endif - } else { - // #ifndef MP-DINGTALK - this.TOAST('小程序端只支持打开图片和文档(word、pdf等)文件') - // #endif - - // #ifdef MP-DINGTALK - this.TOAST('钉钉小程序只支持查看图片文件') - // #endif - - // #ifdef APP-VUE - const tempFilePath = await this.HTTP_DOWNLOAD(uid) - uni.openDocument({ filePath: tempFilePath, fileType: type }) - // #endif - - // #ifdef H5 - await this.HTTP_DOWNLOAD(uid) - // #endif - } + if (this.isImgFile(type)) { + uni.previewImage({ urls: [path], current: path }) + }else{ + uni.openDocument({ filePath: path, fileType: type }) + } + // if (this.isImgFile(type)) { + // uni.previewImage({ urls: [path], current: path }) + // } else if (this.isDocFile(type)) { + // // #ifndef H5 || MP-DINGTALK + // if (size >= 50 * 1024 * 1024) { + // this.TOAST('小程序端无法下载超过50MB的文件，此文件大小为${size}KB，超过限制') + // return + // } + // // #endif + + // // #ifndef MP-DINGTALK + // const tempFilePath = await this.HTTP_DOWNLOAD(uid) + // uni.openDocument({ filePath: tempFilePath, fileType: type }) + // // #endif + + // // #ifdef MP-DINGTALK + // this.TOAST('钉钉小程序只支持查看图片文件') + // // #endif + // } else { + // // #ifndef MP-DINGTALK + // this.TOAST('小程序端只支持打开图片和文档(word、pdf等)文件') + // // #endif + + // // #ifdef MP-DINGTALK + // this.TOAST('钉钉小程序只支持查看图片文件') + // // #endif + + // // #ifdef APP-VUE + // const tempFilePath = await this.HTTP_DOWNLOAD(uid) + // uni.openDocument({ filePath: tempFilePath, fileType: type }) + // // #endif + + // // #ifdef H5 + // await this.HTTP_DOWNLOAD(uid) + // // #endif + // } } } } @@ -153,4 +185,29 @@ export default { line-height: 100%; position: static; } +.fileName{ + padding: 2px 2px; + margin-bottom: 2px; + text-align: center; + position: absolute; + bottom: 0px; + width: 100%; + background: rgba(0,0,0,0.2); + color: #fff; + font-size: 12px; + + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +.mask{ + position: absolute; + top: 0;left: 0; + width: 100%; + height: 100%; + // background: rgba(255,252,153,0.2); + background: rgba(0,0,0,0.7); + z-index: 100; + pointer-events: none; +} diff --git a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-mp/upload.vue b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-mp/upload.vue index e23766717..4e0989faa 100644 --- a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-mp/upload.vue +++ b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-mp/upload.vue @@ -2,26 +2,27 @@ + - + @@ -40,44 +41,190 @@ export default { readonly: {}, value: { default: () => [] }, }, + + data(){ + return{ + imgList:[], + } + }, methods: { delImg(index) { - const newList = JSON.parse(JSON.stringify(this.value)); + const newList = JSON.parse(JSON.stringify(this.imgList)); newList.splice(index, 1); + this.imgList = newList + + this.$emit("update:value", newList); this.$emit("input", newList); this.$emit("change"); this.$emit("del"); }, showfile() { - console.log(this.value); return true; }, chooseImg() { uni.chooseImage({ - count: Number(this.number), + count: (Number(this.number) - this.imgList.length), sizeType: ["original", "compressed"], sourceType: ["album", "camera"], - success: ({ tempFilePaths }) => { - const newList = JSON.parse(JSON.stringify(this.value || [])).concat( - tempFilePaths + success: (res) => { + let {tempFilePaths,tempFiles} = res + if(!this.validate(tempFiles))return + const newList = JSON.parse(JSON.stringify(this.imgList || [])).concat( + tempFilePaths.map(item=>{ + return{ + url:item, + id:'' + } + }) ); - //this.$parent.HTTP_UPLOAD(tempFilePaths[0]); - + this.imgList = newList + + this.$emit("update:value", newList); this.$emit("input", newList); - this.$emit("change"); + this.$emit("change",newList); this.$emit("add"); }, }); }, + + uploadImage(){ + // 单图上传 + return new Promise(async (reslove,reject)=>{ + let hasNotUpdatedList = this.imgList.every(item=>item.id) + if(hasNotUpdatedList){ + reslove(this.imgList) + } + if(this.imgList.length){ + var postData = { + Base64Url: await this.imgToBase64(this.imgList[0].url) + } + this.HTTP_POST('StuInfoFresh/savePhoto', postData, '图片上传失败！').then((data) => { + if (data) { + reslove([{ + url:data.Url, + id:data.AnnexesFileId + }]) + }else{ + reject('图片上传失败！') + } + }) + }else{ + reslove("") + } + }) + }, + + /** + * @description 控制promise.all并发数量 + * @param limit 并发数 + * @param array 参数列表 + * @param apiFn 执行函数 + * @returns {Promise[]>} + */ + async promiseAllLimit(limit, array, apiFn) { + const ret = [] // 用于存放所有的promise实例 + const executing = [] // 用于存放目前正在执行的promise + for (const item of array) { + const p = apiFn(item) + ret.push(p) + if (limit <= array.length) { + // then回调中，当这个promise状态变为fulfilled后，将其从正在执行的promise列表executing中删除 + const e = p.then(() => executing.splice(executing.indexOf(e), 1)) + executing.push(e) + if (executing.length >= limit) { + // 一旦正在执行的promise列表数量等于限制数，就使用Promise.race等待某一个promise状态发生变更， + // 状态变更后，就会执行上面then的回调，将该promise从executing中删除， + // 然后再进入到下一次for循环，生成新的promise进行补充 + await Promise.race(executing) + } + } + } + return Promise.all(ret) + }, + + imgToBase64(url){ + return new Promise((resolve,reject)=>{ + if(!url){ + resolve("") + } + var canvas = document.createElement('canvas'), + ctx = canvas.getContext('2d'), + img = new Image; + + img.crossOrigin = 'Anonymous'; + img.onload = function () { + canvas.height = img.height; + canvas.width = img.width; + ctx.drawImage(img, 0, 0); + var dataURL = canvas.toDataURL('image/png'); + canvas = null; + resolve(dataURL) + }; + img.src = url; + }) + }, + + validate(array){ + // let type = array.every(item=>{ + // return item.type && item.type.substring(0,6) == "image/" + // }) + // if(!type){ + // this.TOAST('文件类型错误'); + // return false + // } + let size = array.every(item=>{ + return item.size && item.size <= 100 * 1024 * 1024 + }) + if(!size){ + this.TOAST('文件大小不得超过100M'); + return false + } + return true + }, viewImg(index) { uni.previewImage({ - urls: this.value, - current: this.value[index], + urls: this.imgList.map(item=>item.id?this.CONFIG('webHost')+item.url:item.url), + current: this.imgList[index].id?this.CONFIG('webHost')+this.imgList[index].url:this.imgList[index].url, }); }, + + // previewFile() { + // var file = document.querySelector('input[type=file]').files[0]; + // var reader = new FileReader(); + // // fileReader.readAsDataURL(blob); + // // fileReader.onerror = () => { + // // reject(new Error('blobToBase64 error')); + // // }; + // // var encodedData = window.btoa("Hello, world"); + // reader.onloadend = function () { + // //$('#PhotoImg').attr('src', reader.result); + // var postData = { + // Base64Url: reader.result + // } + // this.HTTP_POST(config.webapi + "StuInfoFresh/savePhoto", postData, (data) => { + // if (data) { + // $('#Photo').val(data.AnnexesFileId); + // $('#PhotoImg').attr('src', config.web + data.Url); + // } else { + // learun.layer.toast('采集照片信息失败！'); + // } + // }); + // } + // if (file) { + // reader.readAsDataURL(file); + // } + // }, }, + created() { + console.log(123) + this.imgList = JSON.parse(JSON.stringify(this.value.map(item=>{ + item.isUploaded = true + return item + }))) + // [{url:"",id:""}] + } }; diff --git a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/upload-file.vue b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/upload-file.vue new file mode 100644 index 000000000..1a915caae --- /dev/null +++ b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/upload-file.vue @@ -0,0 +1,217 @@ + + + + + diff --git a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/upload-file2.vue b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/upload-file2.vue new file mode 100644 index 000000000..62ae083c9 --- /dev/null +++ b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/upload-file2.vue @@ -0,0 +1,211 @@ + + + + +