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盤下文件保存成功以下