element-ui中upload組件傳遞文件及其他參數(shù)問題如何解決

   點擊上傳
   只能上傳jpg/png文件，且不超過500kb

其實upload就是對input type="file"做了幾層樣式封裝

一 action url

我第一個不理解的就是action中的url，我后臺使用的是PHP語言，根據(jù)我之后的理解，這個url其實就是你PHP使用的上傳的函數(shù)，就和form中的action一樣，不一樣的是我找了好久也沒發(fā)現(xiàn)是否能修改默認的post傳遞方式

二 文件接收的同時，傳遞其他參數(shù)

方案一 url傳參

對PHP提供的url進行傳參，這是最直接能想到的方式，但是因為action中是post方式的，而PHP后臺我使用的restful方式的url，post方式無法實現(xiàn)傳參，我試了好幾種都沒能成功，也不知道要如何改成get方式

第一種方案只能放棄

方案二 不使用action

放棄action，在找了好多資料后發(fā)現(xiàn)可以不使用action，而是用before-upload屬性，這是一個function類型的屬性，默認參數(shù)是當前文件，只要能傳遞這個文件也能實現(xiàn)效果

要傳遞這個方法就需要new一個formdata對象，然后對這個對象追加key和value，類似于postman測試時那樣

具體網上有人給的例子，差不多如下

beforeUpload (file) {
      let fd = new FormData()
      fd.append('key', file, fileName)
      axios.post(url, fd. {
        //做一些操作
      })
      return false // false就是不自動上傳，我后來試了發(fā)現(xiàn)都一樣，都不會自動上傳
    },

這個感覺可以一試，然后我理所當然的寫了一下的方式

beforeUpload (file,id) {
      let fd = new FormData()
      fd.append('key', file, fileName)
      axios.post(url, fd. {
        data：{
         id:id
        }
      })
      return false // false就是不自動上傳，我后來試了發(fā)現(xiàn)都一樣，都不會自動上傳
    },

然后我發(fā)現(xiàn)無論怎么樣我都只能傳過去id，在PHP代碼中dump(_FLIES)永遠是NULL，這就非?；鸫罅耍榱撕镁脹]有解決方法，之后發(fā)現(xiàn)我用的Content-Type應該是multipart/form-data，而f12中調試頁面是application/json; charset=utf-8，我就覺得是不是這個的問題，于是在代碼中又加了headers

beforeUpload (file,id) {
        let fd = new FormData()
        fd.append('key', file, fileName)
        axios.post(url, fd. {
          data：{
           id:id
          },
          headers: {
           'Content-Type': 'multipart/form-data'
          }
        })
        return false // false就是不自動上傳，我后來試了發(fā)現(xiàn)都一樣，都不會自動上傳
     },

這次報的錯是axios Missing boundary in multipart/form-data，沒有邊界，很頭疼無語

后來發(fā)現(xiàn)Content-Type是自動識別然后加邊界的，也有人說要把Content-Type定義為undefined，還是不行，只是自動識別Content-Type，

再后來發(fā)現(xiàn)原來傳遞formdata和data不能一起傳遞，要傳遞formdata就不能有data，所以要改為

beforeUpload (file,id) {
    let fd = new FormData()
    fd.append('file', file)
    fd.append('id',id)
    axios.post(url, fd, {

    })
    return false // false就是不自動上傳，我后來試了發(fā)現(xiàn)都一樣，都不會自動上傳
 },

這樣就可以了

以下是我的代碼

            
            將文件拖到此處，或點擊上傳