El-uploadとFormDataアップロードファイル

最近はel-uploadで画像をアップロードする機能で、用のel-uplodでのクリックでアップロードしています.でもアップロードをクリックしたとき.アクションのpostリクエストはトリガーされないので、いっそon-change関数にオリジナルのFormDataアップロードファイルを書き込む方法です.

getImgUrl () {
    var fileValue = document.querySelector('.el-upload .el-upload__input')
    var fd = new window.FormData()
    //   post     。   file,        ，   fileType，  category（        ）
    fd.append('fileType', 'category')
    fd.append('file', fileValue.files[0])
    var xhr = new XMLHttpRequest()
    xhr.open('POST', url, true)
    // url      post     
    xhr.send(fd)
    xhr.onload = () => {
      if (xhr.status === 200) {
        this.imgurl = JSON.parse(xhr.responseText).url
        console.log(this.imgurl)
      }
    }
  },
  handleOnchange () {
    this.getImgUrl()
  }

幸いel-uploadにはon-changeというコールバック関数があります.on-changeというコールバック関数では,要求の送信を元のFormDataとXMLで直接実現する.最後にxhr.responseTextという文字列テキストが取得され、まずテキストをjsonオブジェクトに変換する必要があります.そして.urlでサーバから要求されたurlピクチャアドレスを取得します.
ここは注意に値する.xhr.onloadでは矢印関数の形式で書きます.this.imgurlのthisこそVueインスタンスオブジェクトです.xhr.onloadをES 5と書くと

xhr.onload = function () {
    console.log(this)
}

ここのthisはxmlオブジェクトだけです.vueプロジェクトのthis指向の問題に注意
el-uploadのクリックアップロードではactionが書いたpostリクエストはトリガーされません.しかし、el-uploadのユーザーアイコンのアップロードはactionのpostリクエストをトリガーします.自分の結論は正確ではないかもしれない.友达にもっと気をつけてください.