vue antd 中表单中使用a-upload

最新推荐文章于 2025-03-27 16:22:03 发布

reembarkation

最新推荐文章于 2025-03-27 16:22:03 发布

阅读量1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/reembarkation/article/details/134670902

版权

本文介绍了如何在Vue的表单中使用a-upload组件进行文件上传，包括必填属性设置、验证规则和自定义请求处理。开发者需确保`v-decorator`的配置和`customRequest`方法的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在表单中使用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) // 真正的上传
          }
        }) 
}