antdv vue。表单 自定义组件使用 v-decorator

antd vue 中，在 form 表单中的自定义组件使用 v-decorator
问题描述

项目需要，在表单中上传图片，所以要自己定以一个上传图片的组件，直接在 form 中使用，但是普通的自定义组件无法使用表单的 v-decorator。

分析

this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"

　　

经过 getFieldDecorator 或 v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。
你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
你不应该用 v-model，可以使用 this.form.setFieldsValue 来动态改变表单值。
大概描述一下就是，一旦在 form 下使用了 v-decorator 之后，就不需要使用 v-model，其实实现上也有所相同，在自定义组件中需要自己定以 model 的东西，详细可以查阅官网。

简单说明

通俗来说，想使用 v-decorator，就必须要有个 value 想子组件传递数据。和一个 change 方法将子组件的数据变动告诉父组件，下面看部分代码

 

model: {
    prop: 'value',
    event: 'change'
  },
  
  props: {
    value: {
      type: String
      // 这个参数是v-decorator给子组件传值用的
      // 这里不要给默认值， 在form下使用会爆警告 Warning: SquareUpload `default value` can not collect,  please use `option.initialValue` to set default value.
    }
  }
   watch: {
    // 监听数据变化，及时提交给父组件
    fileList: {
      deep: true,
      immediate: true,
      handler: function (newV, oldV) {
      // 向父组件更新
        this.$emit('change', temp)
      }
    }
}

注意：value 不要给默认值，不然会爆警告default value can not collect, please use option.initialValue to set default value.

例子，封装一个上传图片的组件，在 form 中使用
子组件

<template>
    <div>

        <!-- one -->
        <div class="clearfix">
            <a-upload
                    name="upfile"
                    :action="apiUrl"
                    listType="picture-card"
                    :fileList="imageList"
                    :before-upload="beforeUpload"
                    @preview="handlePreview"
                    @change="imgChange"
            >
                <div v-if="imageList.length < maxListSize ">
                    <a-icon type="plus"/>
                    <div class="ant-upload-text">上传图片</div>
                </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="previewCancel">
                <img alt="example" style="width: 100%" :src="previewImage"/>
            </a-modal>
        </div>

    </div>
</template>

<script>
import {randomUUID, isJson} from "@util/functionBox";

export default {
    name: "imgUpload",
    props: {
        value: {
            type: String
            // 这个参数是v-decorator给子组件传值用的
            // 这里不要给默认值， 在form下使用会爆警告 Warning: SquareUpload `default value` can not collect,  please use `option.initialValue` to set default value.
        },
        format: {type: Boolean, default: false},
        maxListSize: {type: Number, default: 1},
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    data() {
        return {
            apiUrl: this.apiBaseURL + "/base/upload/upload_image",
            imageList: [],
            previewVisible: false,
            previewImage: "",
        }
    },

    watch: {
        // 监听父组件传递过来的图片列表信息
        value: {
            deep: true,
            immediate: true,
            handler: function (newV,oldV) {
                // 向父组件更新
                if (newV === null || newV === '' || newV === undefined) {
                    this.imageList = []
                    return
                }

                // 需要清空原有的文件列表，否则会出现多个🙅
                this.imageList = []
                if (Array.isArray(newV)) {
                    //以防万一，避免出错
                } else {
                    if (this.format && isJson(newV)) {
                        //需要格式化且是JSON格式才执行，否则会死循环输出
                        let caList = JSON.parse(newV)
                        if (caList && caList.length && caList.length != 0) {
                            // var newImgList = [];
                            for (let i = 0; i < caList.length; i++) {
                                this.pushImg(caList[i])
                            }
                            // this.imageList = newImgList
                        }
                    } else {
                        this.pushImg(newV)
                    }
                }

                // this.$emit('change', newV)
            }
        },
        //监听数据变化，及时提交给父组件
        imageList: {
            deep: true,
            immediate: true,
            handler: function (fileList, oldV) {
                // 向父组件更新
                if (this.imageList.length === 0) {
                    return
                }
                // this.imageList = fileList;
                let urlInfo = null;
                if (
                    fileList.length != 0 &&
                    fileList[fileList.length - 1].status === "done") {
                    // 处理数据
                    if (!this.format) {
                        urlInfo = fileList[0].response.data
                    } else {
                        let imgs = [];
                        for (let i = 0; i < fileList.length; i++) {
                            if (fileList[i].response) {
                                imgs.push(fileList[i].response.data);
                            }
                            // if (fileList[i].url) {
                            //     imgs.push(fileList[i].url);
                            // }
                        }
                        urlInfo = JSON.stringify(imgs);
                    }
                    this.$emit('change', urlInfo)
                }
            }
        }

    },
    methods: {
        imgChange({fileList}) {
            this.imageList = fileList;
            if (
                fileList.length != 0 &&
                fileList[fileList.length - 1].status === "done") {
                this.$message.success("上传成功!");
                // this.$emit('change', this.imageList)
            }
        },
        /**取消阅览 **/
        previewCancel() {
            this.previewVisible = false;
        },
        handlePreview(file) {
            this.previewImage = file.url || file.thumbUrl;
            this.previewVisible = true;
        },
        beforeUpload(file) {
            // let file = el.file;
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
            if (!isJpgOrPng) {
                this.$message.error("您只能上传 图片 文件!");
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('图片大小必须小于2mb!');
            }
            return isJpgOrPng && isLt2M;
        },
        pushImg(imgUrl) {
            if (!imgUrl) {
                return
            }
            //维护统一的格式
            this.imageList.push({
                uid: randomUUID(),
                name: imgUrl,
                status: "done",
                url: imgUrl,
                response: {
                    data: imgUrl
                },
            })
            return this.imageList;
        },
        getList() {
            return this.imageList;
        },
        getFirst() {
            for (const info in this.imageList) {
                if (!info) {
                    return info;
                }
            }
        },


    }

}
</script>

<style scoped>

</style>

父组件使用

     <imgUpload ref="imgUploadHead" v-decorator="['headImage',{ rules: [{ required: true,message: '请上传照片!' }] }]"></imgUpload>

主要针对单图片和多图片进行了封装📦

多图片后台返回和传入的格式：

“http://media.shixun365.com/image/31dc3ee8e4974c4d8257c9c3d1ece085.png”,“http://media.shixun365.com/image/17e2faf8d13e4e2b857cfde6748534b2.png”]

单图片的格式：

http://media.shixun365.com/image/31dc3ee8e4974c4d8257c9c3d1ece085.png