用户签名组件，初步

Tevin

2022-03-02 0103a44df43cfef6d01151be9470bdc5497a5d9c

 forms/imagePicker/CImagePicker.vue

@@ -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 { Fetcher } from '@components/bases/Fetcher';
import { $fetchCommon } from '@fetchers/FCommon';
import { Tools } from '@components/common/Tools';
import CImageCompressor from './CImageCompressor.vue';
import './cImagePicker.scss';

@@ -46,9 +49,16 @@
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
        // 最大图片张数
        count: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {};
        return {
            fileNames: {},
        };
    },
    computed: {
        files() {
@@ -59,32 +69,61 @@
            } 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 类型
                        if (!fileInfo || fileInfo.path.indexOf('blob') < 0) {
                            return false;
                        }
                        // 尺寸小于 2M 的图片
                        // 尺寸小于 1M 的图片
                        if (fileInfo.size < 1 * 1024 * 1024) {
                            return false;
                        }
@@ -93,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) => {
@@ -102,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) {
@@ -128,7 +167,6 @@
            this.showImg = false;
        },
        handleFail(msg) {
            console.log(msg);
            Taro.showToast({
                title: msg,
                icon: 'none',
@@ -137,20 +175,37 @@
            });
        },
        $uploadImage(callback) {
            const url = $fetchCommon.getUploadImgURL();
            const url = Fetcher.host + $fetchCommon.getUploadImgURL();
            const uploadTeam = [];
            const imgs = [];
            this.files.forEach(file => {
                if (file.type === 'btn') {
                    return;
                }
                // blob 临时文件才上传
                if (file.url.indexOf('blob') >= 0) {
                // 临时文件才上传
                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) {
@@ -162,7 +217,9 @@
                                        resolve(
                                            $fetchCommon.transImgPath(
                                                'fix',
                                                res2.data.src
                                                res2.data.src ||
                                                    res2.data.file ||
                                                    res2.data.url
                                            )
                                        );
                                    } else {