mob-components.git

			@@ -15,16 +15,18 @@
			<AtImagePicker
			ref="picker"
			mode="aspectFit"
			:sourceType="sourceType"
			:multiple="count > 1"
			:count="count"
			:showAddBtn="!selectedFull"
			:length="3"
			:files="files"
			:onChange="(files,operationType,index)=>handleChange(files,operationType,index)"
			:onFail="evt=>handleFail(evt)"
			:onImageClick="(index, file)=>handleImgView(index,file)"
			:onChange="(files,operationType,index) => handleChange(files,operationType,index)"
			:onFail="evt => handleFail(evt)"
			:onImageClick="(index, file) => handleImgView(index,file)"
			/>
			<CImageCompressor ref="compressor" />
			<CImagePreview ref="imgPreview" />
			</view>
			</template>

			@@ -32,16 +34,18 @@
			import Taro from '@tarojs/taro';
			import { $ } from '@tarojs/extend';
			import { AtInput, AtImagePicker, AtCurtain } from 'taro-ui-vue';
			import { Fetcher } from '@components/bases/Fetcher';
			import { $hostBoot } from '@components/bases/HostBoot';
			import { $fetchCommon } from '@fetchers/FCommon';
			import { Tools } from '@components/common/Tools';
			import CImageCompressor from './CImageCompressor.vue';
			import CImagePreview from './CImagePreview.vue';
			import './cImagePicker.scss';

			export default {
			name: 'CImagePicker',
			components: {
			CImageCompressor,
			CImagePreview,
			AtInput,
			AtImagePicker,
			AtCurtain,
			@@ -53,6 +57,26 @@
			count: {
			type: Number,
			default: 1,
			},
			// 图片来源
			sourceType: {
			type: Array,
			default: () => ['album', 'camera'],
			},
			// 上传图片参数
			params: {
			type: Object,
			default: () => {},
			},
			// 是否开启缩略图
			needThumb: {
			type: Boolean,
			default: false,
			},
			// 上传地址来源
			uploadUrlSource: {
			type: String,
			default: '',
			},
			},
			data() {
			@@ -96,7 +120,7 @@
			if (file.file && file.file.originalFileObj) {
			if (
			/image\/(gif\|png\|jpg\|jpeg)/.test(
			file.file.originalFileObj.type
			file.file.originalFileObj.type,
			)
			) {
			return true;
			@@ -119,8 +143,13 @@
			const needs = nextFiles
			.map((file, needIndex) => {
			const fileInfo = file.file;
			// 没有 file 信息对象，或者不是 blob 类型
			if (!fileInfo \|\| fileInfo.path.indexOf('blob') < 0) {
			// 没有 file 信息对象，或者不是 blob、wxfile、tmp 类型
			if (
			!fileInfo \|\|
			(fileInfo.path.indexOf('blob') < 0 &&
			fileInfo.path.indexOf('wxfile') < 0 &&
			fileInfo.path.indexOf('http://tmp/') < 0)
			) {
			return false;
			}
			// 尺寸小于 1M 的图片
			@@ -158,7 +187,8 @@
			const urls = this.files
			.map(file => (file.type === 'btn' ? false : file.url))
			.filter(Boolean);
			Taro.previewImage({
			// 图片预览，支持H5模式下的双指缩放
			this.$refs.imgPreview.$preview({
			current: file.url, // 当前显示图片的http链接
			urls, // 需要预览的图片http链接列表
			});
			@@ -167,6 +197,9 @@
			this.showImg = false;
			},
			handleFail(msg) {
			if (typeof msg === 'object') {
			msg = msg.message;
			}
			Taro.showToast({
			title: msg,
			icon: 'none',
			@@ -175,82 +208,32 @@
			});
			},
			$uploadImage(callback) {
			const url = Fetcher.host + $fetchCommon.getUploadImgURL();
			const uploadTeam = [];
			const imgs = [];
			const files = [];
			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));
			}
			file.fileName = this.fileNames[file.url];
			files.push(file);
			});
			Promise.all(uploadTeam)
			.then(res => {
			this.itemRes.onChange(res);
			setTimeout(() => {
			callback('success');
			}, 0);
			})
			.catch(err => {
			callback('error', err);
			});
			uploadImage(
			files,
			(state, res) => {
			if (state === 'success') {
			this.itemRes.onChange(res);
			setTimeout(() => {
			callback(state);
			}, 10);
			} else if (state === 'error') {
			callback(state, res);
			}
			},
			$fetchCommon.transKeyName('underline', {
			...this.params,
			needThumb: this.needThumb ? 1 : 0,
			}),
			this.uploadUrlSource,
			);
			},
			},
			mounted() {
			@@ -265,4 +248,121 @@
			}
			},
			};

			// 图片上传节流
			const _readyUpload = {};

			export const uploadImage = (files, callback, formData = {}, uploadUrlSource) => {
			if (!files \|\| files.length === 0) {
			callback('success', []);
			return;
			}
			let url = '';
			if (uploadUrlSource === 'LPG') {
			url = $fetchCommon.getLPGUploadImgURL();
			} else {
			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
			) {
			const 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('; ');
			}
			const requestFile = {
			url,
			filePath: file.url,
			fileName: file.fileName \|\| '',
			};
			uploadTeam.push(
			new Promise((resolve, reject) => {
			// 如果本次已上传过，直接返回地址
			if (_readyUpload[file.url] && _readyUpload[file.url].length > 5) {
			resolve(_readyUpload[file.url]);
			return;
			}
			// 上传
			Taro.uploadFile({
			...requestFile,
			header,
			name: 'file',
			formData,
			timeout: 30 * 1000,
			success(res) {
			let res2;
			try {
			res2 =
			typeof res.data === 'string'
			? JSON.parse(res.data)
			: res.data;
			} catch (err) {
			reject({
			...requestFile,
			response: res,
			message: '上传图片异常！',
			});
			return;
			}
			// 上传成功
			if (res2.state.code === 2000) {
			const imgUrl = $fetchCommon.transImgPath(
			'fix',
			res2.data.src \|\| res2.data.file \|\| res2.data.url,
			);
			_readyUpload[file.url] = imgUrl;
			resolve(imgUrl);
			}
			// 上传失败
			else {
			reject({
			...requestFile,
			response: res2,
			message: res2.state.msg,
			});
			}
			},
			cancel(err) {
			reject({
			...requestFile,
			message: '上传图片已取消！',
			});
			},
			fail() {
			reject({
			...requestFile,
			message: '上传图片失败！',
			});
			},
			});
			}),
			);
			}
			// 其他类型视为 url，忽略
			else {
			uploadTeam.push(Promise.resolve(file.url));
			}
			});
			Promise.all(uploadTeam)
			.then(res => {
			callback('success', res);
			})
			.catch(err => {
			callback('error', err);
			});
			};
			</script>