解析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錯誤,但是不影響最終效果,介意的可以看看有什麼方法去除
方案三 分多次傳值
方案二成功瞭就沒有試,不過也沒有意義瞭不方便
到此這篇關於element-ui中upload組件如何傳遞文件及其他參數的文章就介紹到這瞭,更多相關element-ui中upload組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue封裝el-upload批量上傳隻請求一次接口
- elementUI自定義上傳文件功能實現(前端後端超詳細過程)
- vue項目中form data形式傳參方式
- 原生JS實現文件上傳
- 解決axios發送post請求上傳文件到後端的問題(multipart/form-data)