mteacher/src/views/message/control/imgFile.vue

<template>
    <div class="oImgUpload controller" :class="[preview ? '' : 'o-unit']" v-if="widget.type == 'imgupload'">
        <van-field
            :name="widget.model"
            :label="widget.name || '图片'"
            :required="fileCheck ? false : options.required || false"
            :rules="rule"
            v-if="!preview"
        >
            <template #input>
                <van-uploader
                    v-model="dataModel"
                    :before-read="beforeRead"
                    :before-delete="beforeDelete"
                    :after-read="afterRead"
                    :max-count="options.length"
                    preview-size="0.6rem">
                </van-uploader>
            </template>
        </van-field>
        <van-field
            v-else
            :name="widget.model"
            :label="widget.name || '图片'"
            class="preview"
        >
            <template #input>
                <van-uploader
                    v-model="dataModel"
                    :disabled="true"
                    :deletable="false"
                    :max-count="dataModel.length || 0"
                    preview-size="0.5rem">
                </van-uploader>
            </template>
        </van-field>
    </div>
</template>
<script>
import setLoading from '@/common/loading'
import { uploadFile } from '@/views/message/api'
export default {
    name: 'oImgUpload',
    props: ['widget', 'preview', 'value', 'fileCheck'],
    data() {
        return {
            dataModel: this.widget.options?.defaultValue || [],
        }
    },
    mounted() {
        // 初始化参数
        if(this.value) {
            const widget = this.widget
            const model = widget.originModel || widget.model
            for(let v in this.value) {
                if(v == model) {
                    this.dataModel = this.value[v]
                }
            }
        }
    },
    methods: {
        beforeRead(file) {
            const isLt2M = file.size / 1024 / 1024 < 5
            if (!isLt2M) {
                this.$toast('上传图片大小不能超过 5MB')
                return false
            }
            return true
        },
        beforeDelete(file, detail) {
            this.dataModel.splice(detail.index, 1)
            return true
        },
        async afterRead(file, detail) { // 上传头像
            try {
                setLoading(true)
                file.status = 'uploading'
                file.message = '上传中...'
                let formData = new FormData()
                formData.append('file', file.file)
                let res = await uploadFile(formData)
                let result = res.data
                if(result.code == 200) {
                    file.status = 'done'
                    this.dataModel[detail.index] = {
                        url: result.data.url
                    }
                } else {
                    file.status = 'failed'
                    file.message = '上传失败'
                    this.$toast(result.msg)
                    return false
                }
                setLoading(false)
            } catch (err) {
                setLoading(false)
                return false
            }
        },
    },
    computed: {
        options() {
            return this.widget.options || {}
        },
        rule() {
            let rules = this.widget.rules || []
            if(rules && rules.length > 0) {
                rules.forEach(item => {
                    if(item.pattern) {
                        item.pattern = eval(item.pattern)
                    }
                    // 判断是否上传文件
                    if(this.fileCheck) {
                        item.required = false
                    }
                });
            }
            return rules
        }
    },
    watch: {
        // dataModel: {
        //     deep: true,
        //     handler(newValue) {
        //         if (newValue !== undefined && newValue !== null) {
        //         }
        //     }
        // },
    }
}
</script>

<style lang='less' scoped>
@import url('./controlCommon.less');
/deep/.van-uploader__wrapper--disabled {
    opacity: 0.9;
}
</style>