如何解析element-ui中upload組件傳遞文件及其他參數的問題

如何解析element-ui中upload組件傳遞文件及其他參數的問題，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

最近項目用到了vuethink，里面集成了element-ui，之前一直用的是bootstrap框架，對js也是一知半解，然后也用過vue.js，但也是學的不通透的，然后就各種入坑。

下面就分析一下我使用element-ui遇到的問題以及解決方法吧。

首先在element-ui的官網里有對upload組件的簡單的介紹

<el-upload
   class="upload-demo"
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
   :file-list="fileList">
   <el-button size="small" type="primary">點擊上傳</el-button>
   <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>

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

一 action url

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

二 文件接收的同時，傳遞其他參數

方案一 url傳參

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

第一種方案只能放棄

方案二 不使用action

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

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

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

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

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

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

然后我發現無論怎么樣我都只能傳過去id，在PHP代碼中dump(_FLIES)永遠是NULL，這就非常火大了，查了好久沒有解決方法，之后發現我用的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就是不自動上傳，我后來試了發現都一樣，都不會自動上傳
     },

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

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

再后來發現原來傳遞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就是不自動上傳，我后來試了發現都一樣，都不會自動上傳
 },

這樣就可以了

以下是我的代碼

<el-upload class="upload-demo"
            drag
            action="123"
            :before-upload="beforeUpload"
            multiple
            ref="newupload"
            :auto-upload="false"
            accept=".mp4,.flv,.mov"
            :on-change="newhandleChange"
            :on-success="newhandlesuccess">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em>     </div>
            <div class="el-upload__tip" slot="tip">請注意您只能上傳.mp4 .flv .mov格式的視頻文件</div>
          </el-upload>
          el-button type="primary" @click="newSubmitForm()" class="yes-btn">
            確 定
          </el-button>
          <el-button @click="resetForm('newform')">
            重 置
          </el-button>

beforeUpload (file) {
      console.log(file)
      let fd = new FormData()
      fd.append('file', file)
      fd.append('groupId', this.groupId)
      // console.log(fd)
      newVideo(fd).then(res => {
        console.log(res)
      })
      return true
    },

newSubmitForm () {
       this.$refs.newupload.submit()
    },

export function newVideo (data) {
  return axios({
    method: 'post',
    url: 'http://localhost:8086/Platform1-back-end/public/admin/VideoBase/newVideo',
    timeout: 20000,
    data: data
  })
}

我是把axios集中放在一個文件，與vue文件分離了，其實都差不多

還有就是action中隨便加一個東西會有404錯誤，但是不影響最終效果，介意的可以看看有什么方法去除

方案三 分多次傳值

方案二成功了就沒有試，不過也沒有意義了不方便

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。