element-ui中upload組件如何傳遞文件及其餘參數

最近項目用到了vuethink，裏面集成了element-ui，以前一直用的是bootstrap框架，對js也是隻知其一;不知其二，而後也用過vue.js，但也是學的不通透的，而後就各類入坑。

下面就分析一下我使用element-ui遇到的問題以及解決方法吧，若有不足請指正。

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

1  <el-upload
2    class="upload-demo"
3    action="https://jsonplaceholder.typicode.com/posts/"
4    :on-preview="handlePreview"
5    :on-remove="handleRemove"
6    :file-list="fileList">
7    <el-button size="small" type="primary">點擊上傳</el-button>
8    <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
9 </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就是不自動上傳，我後來試了發現都同樣，都不會自動上傳
    },

 

這個感受能夠一試，而後我理所固然的寫了一下的方式

 1    beforeUpload (file,id) {
 2       let fd = new FormData()
 3       fd.append('key', file, fileName)
 4       axios.post(url, fd. {
 5         data：{
 6          id:id
 7         }
 8       })
 9       return false // false就是不自動上傳，我後來試了發現都同樣，都不會自動上傳
10     },

 

而後我發現不管怎麼樣我都只能傳過去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，因此要改成

1 beforeUpload (file,id) {
2     let fd = new FormData()
3     fd.append('file', file)
4     fd.append('id',id)
5     axios.post(url, fd, {
6          
7     })
8     return false // false就是不自動上傳，我後來試了發現都同樣，都不會自動上傳
9  },

 

這樣就能夠了

如下是個人代碼

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

 

 1    beforeUpload (file) {
 2       console.log(file)
 3       let fd = new FormData()
 4       fd.append('file', file)
 5       fd.append('groupId', this.groupId)
 6       // console.log(fd)
 7       newVideo(fd).then(res => {
 8         console.log(res)
 9       })
10       return true
11     },

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

 

1 export function newVideo (data) {
2   return axios({
3     method: 'post',
4     url: 'http://localhost:8086/Platform1-back-end/public/admin/VideoBase/newVideo',
5     timeout: 20000,
6     data: data
7   })
8 }

 

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

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

方案三 分屢次傳值

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