antdvue 附件上传

 

 

 注：以下方法都是依据Ant Design of Vue为参考

第一种方式（仅适用于上传，不可拿返回的数据作为参数请求接口）：

因为函数作用域原因，不可以赋值给全局变量使用

①在data中声明 customRequest：null

②vue

 <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="附件">
              <a-upload name="file" :customRequest="customRequest">   
                <a-button icon="upload" @click="upload"> 上传</a-button>
              </a-upload>
                  <p></p>
        </a-form-model-item>
           
  </a-form-model>

③methods

upload() {
    
      this.customRequest = function (options) {
        let params = new FormData()
        params.append('files', options.file)

        params.forEach((key) => {
          console.log(key);   //key的内容是上传的整个文件信息
        })

       this.$axios.get("/web/mulFileUpload", {params}).then((res) => {               
          if(res.code=200){console.log("上传成功")}  
         })   
   } },

 

第二种方式（可拿返回的数据作为参数请求接口）：

①vue

 <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="附件">
              <a-upload name="file" :customRequest="customRequest">   
                <a-button icon="upload" @click="upload"> 上传</a-button>
              </a-upload>
                  <p></p>
        </a-form-model-item>
           
  </a-form-model>

②methods

 customRequest(data) {
      let params = new FormData()
      params.append('files', data.file)

      params.forEach((key) => {
        console.log(key)
        this.enclosureName = key.name
        this.enclosureSize = key.size
        this.enclosureType = key.type
      })
    },

示例图：