form如何验证upload组件是否选择文件

[yayli]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

1.提交表单时要验证是否选择文件（只是展示在页面上，非上传到服务器）
2.写了自定义校验，移除文件时没有触发自定义校验方法

What does the proposed API look like?

win10、谷歌 80.0.3987.116，1.4.8

[yf-hk]

设一个 :file-list="fileList"，加上 @change 自己验证

[yayli]

删除本地文件不能触发change事件

[yf-hk]

删除本地文件不能触发change事件

你可以 watch fileList 吧
虽然不优雅，但是 works

[polichan]

删除本地文件不能触发change事件

你可以 watch fileList 吧
虽然不优雅，但是 works

Nice workround, thx.

[123jiacheng123]

你是想要 删除本地文件自动触发 ‘请上传文件’的提示嘛？？

[yayli]

是的，删除本地文件或点击提交时能触发校验

[cn666]

我也想知道这个问题，如何用官方提供的验证去验证上传组件的必填

[123jiacheng123]

官方没有貌似，后来自己手动加了点

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "chenning"<[email protected]&gt;; 发送时间: 2020年9月16日(星期三) 中午1:46 收件人: "vueComponent/ant-design-vue"<[email protected]&gt;; 抄送: "逍遥郎少"<[email protected]&gt;; "Comment"<[email protected]&gt;; 主题: Re: [vueComponent/ant-design-vue] form如何验证upload组件是否选择文件 (#1814) 我也想知道这个问题，如何用官方提供的验证去验证上传组件的必填 — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[cn666]

额，该怎么做呢，我还想要用到官方的那个必填报错的样式，该如何去处理

[123jiacheng123]

你就直接判断文件是否为空，给出提示即可，我做的toB的，没要求太高 对于此处

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "chenning"<[email protected]&gt;; 发送时间: 2020年9月16日(星期三) 中午1:49 收件人: "vueComponent/ant-design-vue"<[email protected]&gt;; 抄送: "逍遥郎少"<[email protected]&gt;; "Comment"<[email protected]&gt;; 主题: Re: [vueComponent/ant-design-vue] form如何验证upload组件是否选择文件 (#1814) 额，该怎么做呢，我还想要用到官方的那个必填报错的样式，该如何去处理 — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[itskaiway]

本来想提个bug，但无意间看到这个issue，手痒给出个解决方案，思路非常简单。

首先在你的表单的上传的item内加一个隐藏的input，注册表单file字段

              <a-upload
                action="你的后台上传地址"
                :headers="{'Authorization':`Bearer ${token}`}"
                list-type="picture-card"
                :file-list="fileList"
                @preview="handlePreview"
                @change="handleChange"
                :beforeUpload="beforeUpload"
              >
                <div v-if="fileList.length < 4">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">
                    上传
                  </div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="图片" style="width: 100%" :src="previewImage" />
              </a-modal>
              <a-input
                :hidden="true"
                v-decorator="['file',{
                  rules: [{ required: true, message: '上传文件不能为空' }],
                }]"
              ></a-input>
            </a-form-item>

因为上传成功或者删除都会进入change事件，所以只需要在change事件中对应去处理file的值,此处的示例代码因为只用到了一张图片而且后台直接返回是一个oss链接，所以取了下标0（根据自己的业务进行修改），

// xxxfrom对应你自己的form表单名，此外在nexttick中你可以重新去手动触发校验file，我一般只在提交的时候校验全部
handleChange ({ fileList }) {
      this.fileList = fileList
      this.$nextTick(() => {
        this.xxxfrom.setFieldsValue({
          file: fileList[0] && fileList[0].response ? fileList[0].response.data: ''
        })
      })
    },

该issue可以close了

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.