在表单中使用a-upload, 属性是必须填写,并在表单的确认按钮中实现上传功能。

<a-form :form="form">
          <a-row>
            <a-col>
              <a-form-item label="上传附件">
                <a-upload
                 v-decorator="['file',
                  { 
                    rules: [{ required: true, message: '请上传文件' }] 
                  }
                ]"
                  :showUploadList="false"
                  :customRequest = "customRequest">
                  <a-button> <a-icon type="upload" /> 选择文件 </a-button>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col>
                 <a-form-item><a-button @click="ok">提交</a-button> </a-form-item>
            </a-col>
          </a-row>
        </a-form>

data:

data(){
     return {
        form: this.$form.createForm(this),
        file:''
    }
}

上传的方法和提交方法:

customRequest(file){
    // 上传方法中只是把文件暂存
         this.file = file
},

ok(){
    // 提交数据,验证必须表单项是否都已经填写,包括是否上传了文件
     this.form.validateFields((errors, values) => {
          if (!errors) {
            this.handleUpload(this.file) // 真正的上传
          }
        }) 
}

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐