From b22223dd84a729174a5973971c08cc48d039bd1d Mon Sep 17 00:00:00 2001 From: Tevin <tingquanren@163.com> Date: Thu, 14 Apr 2022 20:44:20 +0800 Subject: [PATCH] 强化日期格式化识别能力,优化开关组件显示 --- forms/imagePicker/CImagePicker.vue | 92 ++++++++++++++++++++++++++++++++++++---------- 1 files changed, 72 insertions(+), 20 deletions(-) diff --git a/forms/imagePicker/CImagePicker.vue b/forms/imagePicker/CImagePicker.vue index a69bd98..a700fd6 100644 --- a/forms/imagePicker/CImagePicker.vue +++ b/forms/imagePicker/CImagePicker.vue @@ -14,9 +14,10 @@ /> <AtImagePicker ref="picker" - multiple mode="aspectFit" - :count="9" + :multiple="count > 1" + :count="count" + :showAddBtn="!selectedFull" :length="3" :files="files" :onChange="(files,operationType,index)=>handleChange(files,operationType,index)" @@ -31,7 +32,9 @@ import Taro from '@tarojs/taro'; import { $ } from '@tarojs/extend'; import { AtInput, AtImagePicker, AtCurtain } from 'taro-ui-vue'; +import { Fetcher } from '@components/bases/Fetcher'; import { $fetchCommon } from '@fetchers/FCommon'; +import { Tools } from '@components/common/Tools'; import CImageCompressor from './CImageCompressor.vue'; import './cImagePicker.scss'; @@ -48,12 +51,14 @@ itemRes: Object, // 最大图片张数 count: { - type: number, - default: 9, + type: Number, + default: 1, }, }, data() { - return {}; + return { + fileNames: {}, + }; }, computed: { files() { @@ -64,25 +69,54 @@ } else if (Object.prototype.toString.call(value) === '[object Array]') { files = value.map(url => ({ url })); } - files.push({ type: 'btn' }); return files; + }, + selectedFull() { + return this.files.length >= this.count; }, }, methods: { - triggerChange(files) { + _triggerChange(files) { const value = []; files.forEach(file => { - if (file.type === 'btn') { - return; - } value.push(file.url); + // 记录原文件名 + if (file.file && file.file.originalFileObj) { + this.fileNames[file.url] = file.file.originalFileObj.name; + } }); this.itemRes.onChange(value); }, handleChange(files, operationType, index) { // 添加图片 if (operationType === 'add') { - const needs = files + // 屏蔽其他格式 + let nextFiles = files.filter(file => { + // 新添加 + if (file.file && file.file.originalFileObj) { + if ( + /image\/(gif|png|jpg|jpeg)/.test( + file.file.originalFileObj.type + ) + ) { + return true; + } else { + Tools.toast('不支持的格式,请选择其他图片!'); + return false; + } + } + // 非本次添加的图片 + else { + return true; + } + }); + // 限制数量 + if (nextFiles.length > this.count) { + Tools.toast('最多只能选 ' + this.count + ' 张图片!'); + nextFiles = nextFiles.splice(0, this.count); + } + // 检查是否需要压缩 + const needs = nextFiles .map((file, needIndex) => { const fileInfo = file.file; // 没有 file 信息对象,或者不是 blob 类型 @@ -98,7 +132,7 @@ .filter(Boolean); // 存在需要压缩的图片,一次性压缩 if (needs.length > 0) { - const files2 = [...files]; + const files2 = [...nextFiles]; const needPaths = needs.map(need => need[0].path); this.$refs.compressor.$compress(needPaths, compressedFiles => { compressedFiles.forEach((cpPath, cpIndex) => { @@ -107,17 +141,17 @@ url: cpPath.compress, }; }); - this.triggerChange(files2); + this._triggerChange(files2); }); } // 不存在,直接显示 else { - this.triggerChange(files); + this._triggerChange(nextFiles); } } // 删除图片,直接显示 else { - this.triggerChange(files); + this._triggerChange(files); } }, handleImgView(index, file) { @@ -133,7 +167,6 @@ this.showImg = false; }, handleFail(msg) { - console.log(msg); Taro.showToast({ title: msg, icon: 'none', @@ -142,20 +175,37 @@ }); }, $uploadImage(callback) { - const url = $fetchCommon.getUploadImgURL(); + const url = Fetcher.host + $fetchCommon.getUploadImgURL(); const uploadTeam = []; const imgs = []; this.files.forEach(file => { if (file.type === 'btn') { return; } - // blob 临时文件才上传 - if (file.url.indexOf('blob') >= 0) { + // 临时文件才上传 + if ( + file.url.indexOf('blob') >= 0 || + file.url.indexOf('wxfile') >= 0 || + file.url.indexOf('http://tmp/') >= 0 + ) { + let header = {}; + if (process.env.TARO_ENV === 'weapp') { + const localCookies = JSON.parse( + Taro.getStorageSync('cookies') || '{}' + ); + const cookiesArr = []; + Object.keys(localCookies).forEach(key => { + cookiesArr.push(key + '=' + localCookies[key]); + }); + header['Cookie'] = cookiesArr.join('; '); + } uploadTeam.push( new Promise((resolve, reject) => { Taro.uploadFile({ url, + header, filePath: file.url, + fileName: this.fileNames[file.url], name: 'file', formData: {}, success(res) { @@ -167,7 +217,9 @@ resolve( $fetchCommon.transImgPath( 'fix', - res2.data.src + res2.data.src || + res2.data.file || + res2.data.url ) ); } else { -- Gitblit v1.9.1