Vue使用axios圖片上傳遇到的問題
FormData是個什麼鬼?
經過多方搜尋調查瞭解,這個神奇的東西是XMLHttpRequest Level 2 新增的一個物件,於2008年2月提出,可以利用它來提交表單、模擬表單提交,當然最大的優勢就是可以上傳二進位制檔案,可以把所有表單元素的name與value組成一個queryString,提交到後臺。
劃重點: 可以把所有表單元素的name與value組成一個queryString,提交到後臺。這不就是後端所謂的轉換資料格式,按格式提交唄,前後端分離肯定是非同步提交,這個就可以很好的去解決這個問題!
使用也很soeasy 只需要把 form 表單作為引數傳入 FormData 建構函式即可!
在vue和axios的配合下實戰一波
<!-- *.vue元件中的上傳元件 我這裡使用的是buefy的vue元件 --> <form method="post" enctype="multipart/form-data"> <b-field class="file is-primary" :class="{'has-name': !!file}"> 程式設計客棧 <b-upload v-model="file" class="file-label" @input="getModifyAvatar()"> <span class="file-cta"> <b-icon class="file-icon" icon="upload"></b-icon> <span class="file-label">Click to upload</span> </span> <span class="file-name" v-if="file"> {{ file.name }} </span> </b-upload> </b-field> </form> <script> export default { data(){ return { userInfo: '',// 通過一dKteP個get請求把使用者相關資訊賦值給它 file: null,} },methods: { // 修改頭像 getModifyAvatar(){ const formData = new FormData(); // 構造formData資料 程式設計客棧 formData.append('avatar',this.file) // 提交put請求 getModifyInfo(formData).then(res => { this.userInfo.avatar = res.data.avatar }) },} } </script>
// api.js // 這是我封裝的全域性請求方法 import { request } from '../network/request' // 修改使用者頭像 export const ge程式設計客棧tModifyInfo = (params) => { return request({ url: 've_register/1/',method: 'put',headers: { 'Content-Type': 'multipart/form-data' },data: params }) }
看以上程式碼,注意傳送請求的時www.cppcns.com候一定要設定請求頭header,如上所示,html表單form中也需要設定下enctype="multipart/form-data" 否則也是不行的!
通過上面的例子我們目前只用到了FormData的append()方法,網上大部分關於 FormData 介紹的文章都只提到了append()方法,那麼FormData 物件到底有些什麼方法呢?其實我們console 一下就知道了:
console 之後我們有重大的發現,FormData 物件竟然有這麼多方法,所以還是自己測試才能發現真相,下面就對這些方法一一進行講解:
append()
append()方法用於向 FormData 物件中新增鍵值對:
fd.append('key1',"value1"); fd.append('key2',"value2");
fd是 FormData 物件,可以新建的空的物件,也可以是已經包含 form 表單或其他鍵值對。
set()
設定對應的鍵 key 對應的值 value(s)
fd.set('key1',"value1"); fd.set('key2',"value2");
append() 方法有點類似,這兩者的區別就是,當指定的 key 值存在時,append()方法是將新增的新增的所有的鍵值對最後,而set()方法將會覆蓋前面的設定的鍵值對。還是通過例項來對比,我們在前面的 form 的基礎上 append() 或 set() 新的鍵值對:
fd.append('name',"will");
有兩個key為name的鍵值對:
以上就是 append() 和 set() 的區別。如果設定的key值不存在,那麼兩者的效果是一樣的。
delete()
接收一個引數,表示你要刪除的 key 值的名字,如果有多個相同 key 值,會一併刪除:
fd.append('name','will'); fd.delete('name');
form 中的 name 資訊以及通過append() 新增的name 的資訊都被刪除了。
get() 和 getAll()
接收一個引數,表示需要查詢的 key 的名稱,返回第一個該 key 對應的 value 值。如果有多個相同的 key, 而且要返回所有的這個 key 對應的 value 值。
同樣以上面的 form 表單為基礎:
fd.append('name','will'); console.log(fd.get('name')); // sean
fd.append('name','will'); console.log(fd.getAll('name')); // ["sean","will"]
has()
該方法也接收一個引數,同樣是 key 的名稱,返回一個Boolean 值, 用來判斷FormData 物件是否含有該 key。以上面的form為例:
console.log(fd.has('name')); // true console.log(fd.has('Name')); // false
其他幾個就不介紹了,大家感興趣的自己去驗證下,寫一遍嗎,敲一遍,比看任何文章要來的實在喲!
如果以上文章對您有幫助,請給我們的開源專案點點star: github.crmeb.net/u/xingfu 不勝感激!
以上就是Vue使用axios圖片上傳遇到的問題的詳細內容,更多關於Vue使用axios圖片上傳的資料請關注我們其它相關文章!