From 3b6042284d2924b07d8f8a87c00824c0a0328783 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Fri, 19 Aug 2022 16:30:26 +0800
Subject: [PATCH] 实现数值显示组件
---
forms/imagePicker/CImagePicker.vue | 191 ++++++++++++++++++++++++++++++-----------------
1 files changed, 123 insertions(+), 68 deletions(-)
diff --git a/forms/imagePicker/CImagePicker.vue b/forms/imagePicker/CImagePicker.vue
index 8ab735c..6ebd882 100644
--- a/forms/imagePicker/CImagePicker.vue
+++ b/forms/imagePicker/CImagePicker.vue
@@ -32,7 +32,7 @@
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';
@@ -56,7 +56,9 @@
},
},
data() {
- return {};
+ return {
+ fileNames: {},
+ };
},
computed: {
files() {
@@ -78,6 +80,10 @@
const value = [];
files.forEach(file => {
value.push(file.url);
+ // 记录原文件名
+ if (file.file && file.file.originalFileObj) {
+ this.fileNames[file.url] = file.file.originalFileObj.name;
+ }
});
this.itemRes.onChange(value);
},
@@ -161,6 +167,9 @@
this.showImg = false;
},
handleFail(msg) {
+ if (typeof msg === 'object') {
+ msg = msg.message;
+ }
Taro.showToast({
title: msg,
icon: 'none',
@@ -169,79 +178,24 @@
});
},
$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,
- 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);
+ }
+ });
},
},
mounted() {
@@ -256,4 +210,105 @@
}
},
};
+
+// 图片上传节流
+const _readyUpload = {};
+
+export const uploadImage = (files, callback) => {
+ if (!files || files.length === 0) {
+ callback('success', []);
+ return;
+ }
+ 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
+ ) {
+ 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: {},
+ success(res) {
+ const res2 =
+ typeof res.data === 'string'
+ ? JSON.parse(res.data)
+ : res.data;
+ // 上传成功
+ 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>
\ No newline at end of file
--
Gitblit v1.9.1