优化图片上传组件，修复图片路径转换的问题

Tevin

2020-12-28 1f76e7315389bf38a697e6db4d4be3fce6425c45

优化图片上传组件，修复图片路径转换的问题

 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;

 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;
    //     }
    // }

    /**
     * 统计字符串占位宽度

 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);