AntDesign vue学习笔记（九）自定义文件上传

第七节时提到，上传文件时实际可能须要传输一个token。

一、查看vue antdesign文档
https://vue.ant.design/components/upload-cn/

 

二、使用customRequest

customRequest 经过覆盖默认的上传行为，能够自定义本身的上传实现 Function 

三、定义customRequest，以前定义action行为会被覆盖，能够注释掉

四、customRequet代码以下

customRequest (data) {
      const formData = new FormData()
      formData.append('file', data.file)
      formData.append('token', 'aiufpaidfupipiu')//随便写一个token示例
      this.saveFile(formData)
    },
    saveFile (formData) {
      this.form.validateFields((err, values) => {
      if (!err) {
        let that = this
        this.axios(
        {
          method: 'post',
          url: 'http://localhost:4785/api/values/PostSingle',
          data: formData
        })
        .then((response) => {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })
        }
      })
    },

五、这样当文件变化时，就会附带token并上传到服务器，NetWork观察提交数据以下

 六、有同窗反映没法接受数据，现给一个后端代码demo(.netcore）参考，新建一个.netcore webapi工程，修改Post代码以下。

七、D盘下文件保存成功以下