WebApp【公共组件库】@前端(For Git Submodule)
YFeng
2021-03-16 de2ed36401bdc93085d7b2e715bf212b88fc6cd5
forms/imagePicker/CImagePicker.vue
@@ -7,10 +7,10 @@
    <view class="c-image-picker">
        <AtInput
            ref="input"
            :name="itemData.name"
            :title="itemData.label"
            :required="itemData.required"
            :error="itemData.error"
            :name="itemRes.name"
            :title="itemRes.label"
            :required="itemRes.required"
            :error="itemRes.error"
        />
        <AtImagePicker
            ref="picker"
@@ -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 {
@@ -51,7 +53,7 @@
        AtCurtain,
    },
    props: {
        itemData: Object,
        itemRes: Object,
    },
    data() {
        return {
@@ -61,7 +63,7 @@
    },
    computed: {
        files() {
            const value = this.itemData.formData[this.itemData.name];
            const value = this.itemRes.formData[this.itemRes.name];
            let files = [];
            if (Object.prototype.toString.call(value) === '[object String]') {
                files = value.split(',').map((url) => ({ url }));
@@ -74,8 +76,6 @@
    },
    methods: {
        handleChange(files, operationType, index) {
            if (operationType === 'add') {
            }
            const value = [];
            files.forEach((file) => {
                if (file.type === 'btn') {
@@ -83,7 +83,7 @@
                }
                value.push(file.url);
            });
            this.itemData.onChange(value);
            this.itemRes.onChange(value);
        },
        handleImgView(index, file) {
            this.curtainImg = file.url;
@@ -100,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);