WebApp【公共组件库】@前端(For Git Submodule)
Tevin
2021-05-17 31534a7d3a7c765e4fb7ff4cf707b4c82bb78e42
forms/imagePicker/CImagePicker.vue
@@ -39,8 +39,10 @@
</template>
<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import { AtInput, AtImagePicker, AtCurtain } from 'taro-ui-vue';
import { $fetcherCommon } from '@fetchers/FCommon';
import './cImagePicker.scss';
export default {
@@ -51,6 +53,7 @@
        AtCurtain,
    },
    props: {
        // 表单数据资源(表单组件内部机制专用)
        itemRes: Object,
    },
    data() {
@@ -64,9 +67,9 @@
            const value = this.itemRes.formData[this.itemRes.name];
            let files = [];
            if (Object.prototype.toString.call(value) === '[object String]') {
                files = value.split(',').map((url) => ({ url }));
                files = value.split(',').map(url => ({ url }));
            } else if (Object.prototype.toString.call(value) === '[object Array]') {
                files = value.map((url) => ({ url }));
                files = value.map(url => ({ url }));
            }
            files.push({ type: 'btn' });
            return files;
@@ -75,7 +78,7 @@
    methods: {
        handleChange(files, operationType, index) {
            const value = [];
            files.forEach((file) => {
            files.forEach(file => {
                if (file.type === 'btn') {
                    return;
                }
@@ -98,9 +101,76 @@
                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);
        if (process.env.TARO_ENV === 'h5') {
            $(this.$refs.input.$el)
                .find('.at-input__input')
                .prepend(this.$refs.picker.$el);
        } else if (process.env.TARO_ENV === 'weapp') {
            $(this.$refs.input.$el)
                .find('.at-input__container')
                .append(this.$refs.picker.$el);
        }
    },
};
</script>