mob-components.git

			@@ -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 { $hostBoot } from '@components/bases/HostBoot';
			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,63 +175,103 @@
			});
			},
			$uploadImage(callback) {
			const url = $fetchCommon.getUploadImgURL();
			const uploadTeam = [];
			const imgs = [];
			const files = [];
			this.files.forEach(file => {
			if (file.type === 'btn') {
			return;
			}
			// blob 临时文件才上传
			if (file.url.indexOf('blob') >= 0) {
			uploadTeam.push(
			new Promise((resolve, reject) => {
			Taro.uploadFile({
			url,
			filePath: file.url,
			name: 'file',
			formData: {},
			success(res) {
			const res2 =
			typeof res.data === 'string'
			? JSON.parse(res.data)
			: res.data;
			if (res2.state.code === 2000) {
			resolve(
			$fetchCommon.transImgPath(
			'fix',
			res2.data.src
			)
			);
			} else {
			reject({ message: res2.state.msg });
			}
			},
			cancel() {
			reject({ message: '上传图片已取消！' });
			},
			fail() {
			reject({ message: '上传图片失败！' });
			},
			});
			})
			);
			}
			// 其他类型视为 url，忽略
			else {
			uploadTeam.push(Promise.resolve(file.url));
			}
			file.fileName = this.fileNames[file.url];
			files.push(file);
			});
			Promise.all(uploadTeam)
			.then(res => {
			uploadImage(files, (state, res) => {
			if (state === 'success') {
			this.itemRes.onChange(res);
			setTimeout(() => {
			callback('success');
			}, 0);
			})
			.catch(err => {
			callback('error', err);
			});
			callback(state);
			}, 10);
			} else if (state === 'error') {
			callback(state, res);
			}
			});
			// let url = $fetchCommon.getUploadImgURL();
			// if (url.indexOf('http') < 0) {
			// url = $hostBoot.getHost() + url;
			// }
			// const uploadTeam = [];
			// const imgs = [];
			// this.files.forEach(file => {
			// if (file.type === 'btn') {
			// return;
			// }
			// // 临时文件才上传
			// 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) {
			// const res2 =
			// typeof res.data === 'string'
			// ? JSON.parse(res.data)
			// : res.data;
			// if (res2.state.code === 2000) {
			// resolve(
			// $fetchCommon.transImgPath(
			// 'fix',
			// res2.data.src \|\|
			// res2.data.file \|\|
			// res2.data.url
			// )
			// );
			// } else {
			// reject({ message: res2.state.msg });
			// }
			// },
			// cancel() {
			// reject({ message: '上传图片已取消！' });
			// },
			// fail() {
			// reject({ message: '上传图片失败！' });
			// },
			// });
			// })
			// );
			// }
			// // 其他类型视为 url，忽略
			// else {
			// uploadTeam.push(Promise.resolve(file.url));
			// }
			// });
			// Promise.all(uploadTeam)
			// .then(res => {
			// this.itemRes.onChange(res);
			// setTimeout(() => {
			// callback('success');
			// }, 0);
			// })
			// .catch(err => {
			// callback('error', err);
			// });
			},
			},
			mounted() {
			@@ -213,4 +286,79 @@
			}
			},
			};

			export const uploadImage = (files, callback) => {
			if (!files \|\| files.length === 0) {
			callback('success', []);
			}
			let url = $fetchCommon.getUploadImgURL();
			if (url.indexOf('http') < 0) {
			url = $hostBoot.getHost() + url;
			}
			const uploadTeam = [];
			const imgs = [];
			files.forEach(file => {
			// 临时文件才上传
			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: file.fileName \|\| '',
			name: 'file',
			formData: {},
			success(res) {
			const res2 =
			typeof res.data === 'string'
			? JSON.parse(res.data)
			: res.data;
			if (res2.state.code === 2000) {
			resolve(
			$fetchCommon.transImgPath(
			'fix',
			res2.data.src \|\| res2.data.file \|\| res2.data.url
			)
			);
			} else {
			reject({ message: res2.state.msg });
			}
			},
			cancel() {
			reject({ message: '上传图片已取消！' });
			},
			fail() {
			reject({ message: '上传图片失败！' });
			},
			});
			})
			);
			}
			// 其他类型视为 url，忽略
			else {
			uploadTeam.push(Promise.resolve(file.url));
			}
			});
			Promise.all(uploadTeam)
			.then(res => {
			callback('success', res);
			})
			.catch(err => {
			callback('error', err);
			});
			};
			</script>