From 1f76e7315389bf38a697e6db4d4be3fce6425c45 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Mon, 28 Dec 2020 11:00:17 +0800
Subject: [PATCH] 优化图片上传组件，修复图片路径转换的问题
---
common/Tools.js | 52 +++++++++++++-------------
bases/Fetcher.js | 2
forms/imagePicker/CImagePicker.vue | 54 +++++++++++++++++++++++++++
3 files changed, 81 insertions(+), 27 deletions(-)
diff --git a/bases/Fetcher.js b/bases/Fetcher.js
index f845bae..c84c458 100644
--- a/bases/Fetcher.js
+++ b/bases/Fetcher.js
@@ -439,7 +439,7 @@
} else {
// 修复补齐
if (type === 'fix') {
- if (!path || /^\/(upload|static)/.test(path)) {
+ if (!path || /^(http|\/upload|\/static)/.test(path)) {
return path;
} else {
return '/upload/' + path;
diff --git a/common/Tools.js b/common/Tools.js
index 57a1073..6e240f6 100644
--- a/common/Tools.js
+++ b/common/Tools.js
@@ -177,32 +177,32 @@
return true;
}
- static getObjDataByPath(obj, path) {
- const arr = path.split('.');
- const reg2 = /\[(.*)]/g;
- const reg4 = /\w+(?=\[)|(?<=\[)(.*?)(?=])/g;
- let stack = [];
- let temp;
- arr.forEach(item => {
- if (reg2.test(item)) {
- while ((temp = reg4.exec(item))) {
- stack.push(temp[0]);
- }
- } else {
- stack.push(item);
- }
- });
- stack = stack.map(item => {
- return item.replace(/^['"`]|['"`]$/g, '');
- });
- try {
- return stack.reduce((pre, next) => {
- return pre[next];
- }, obj);
- } catch (err) {
- return undefined;
- }
- }
+ // static getObjDataByPath(obj, path) {
+ // const arr = path.split('.');
+ // const reg2 = /\[(.*)]/g;
+ // const reg4 = /\w+(?=\[)|(?<=\[)(.*?)(?=])/g;
+ // let stack = [];
+ // let temp;
+ // arr.forEach(item => {
+ // if (reg2.test(item)) {
+ // while ((temp = reg4.exec(item))) {
+ // stack.push(temp[0]);
+ // }
+ // } else {
+ // stack.push(item);
+ // }
+ // });
+ // stack = stack.map(item => {
+ // return item.replace(/^['"`]|['"`]$/g, '');
+ // });
+ // try {
+ // return stack.reduce((pre, next) => {
+ // return pre[next];
+ // }, obj);
+ // } catch (err) {
+ // return undefined;
+ // }
+ // }
/**
* 统计字符串占位宽度
diff --git a/forms/imagePicker/CImagePicker.vue b/forms/imagePicker/CImagePicker.vue
index 2bd289e..fe3507e 100644
--- a/forms/imagePicker/CImagePicker.vue
+++ b/forms/imagePicker/CImagePicker.vue
@@ -40,7 +40,9 @@
<script>
import { $ } from '@tarojs/extend';
+import Taro from '@tarojs/taro';
import { AtInput, AtImagePicker, AtCurtain } from 'taro-ui-vue';
+import { $fetcherCommon } from '@fetchers/FCommon';
import './cImagePicker.scss';
export default {
@@ -98,6 +100,58 @@
duration: 2000,
});
},
+ $uploadImage(callback) {
+ const url = $fetcherCommon.getUploadImgURL();
+ const uploadTeam = [];
+ const imgs = [];
+ 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($fetcherCommon.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));
+ }
+ });
+ Promise.all(uploadTeam)
+ .then((res) => {
+ this.itemRes.onChange(res);
+ setTimeout(() => {
+ callback('success');
+ }, 0);
+ })
+ .catch((err) => {
+ callback('error', err);
+ });
+ },
},
mounted() {
$(this.$refs.input.$el).find('.at-input__input').prepend(this.$refs.picker.$el);
--
Gitblit v1.9.1