最開始百度到各種加headers，最後發現沒什麼用，有大兄弟知道的可以告知一下哦，記個隨筆

原始input標籤form表單上傳

<input type="file" @change="onchangemd">

methods: {
 	onchangemd(程式設計客棧e){
		console.log(e.target.files)//這個就是選中檔案資訊
		let formdata = new FormData()
		Array.from(e.target.files).map(item => {
         console.log(item)
         formdata.append("file",item)  //將每一個檔案圖片都加進formdata
       })
       axios.post("介面地址",formdata).then(res => { console.log(res) })
	}
 }

當看到二進位制提交資料，就成功了（binary）

這種也是成功的（是二進位制的展開資料。因為有些瀏覽器不顯示binary）

上圖可以看出 傳統上傳檔案是以二進位制的格式formdata格式提交

用elementui自帶的el-uploaXNxBHPnKd上傳

<el-upload action="" :on-change="handleelchange"  :auto-upload="false" list-type="picture-card">
     <i class="el-icon-plus"></i>
</el-upload>

 handleelchange(file,fileList) {
      console.log(file,fileList)
      let formdata = new FormData()
      fileList.map(item => { //fileList本來就是陣列，就不用轉為真陣列了
        formdata.append("file",item.raw)  //將每一個檔案圖片都加進formdata
      })
       axios.post("介面地址",formdata).then(res => { console.log(res) })
    },

不用設定請求頭等（直接用FormData格式提交就行），當看到formdata資料為二進位制就說明提交正常（binary），同樣有些瀏覽器不顯示binary，以------WebKitFormBoundaryXoZpi2juymcNoW0l 開頭的這種也是提交正常的

注意fileList陣列中的raw才是真實檔案資料，如果直接用item而不是item.raw，那麼會報500錯誤，並且formdata中的資料不是二進位制而是物件格式

fileList.map(item => {
formdata.append(“file”,item) //錯誤例項。要用item.raw
})

elwww.cppcns.com

elementui實現一次性上傳多張圖片

注意： 管用思維，點選提交然後觸發表單提交事件，然後表單提交事件中發起請求。

結果： 上傳每張圖片都需要發起請求，即會發起多次請求

處理： 在submit階段（即this.$refs.xxx.submit() 這步就發起請求），在提交函式中僅僅只進行圖片獲取

多張圖片上傳最後一個注意點： 多張圖片的這個file不能寫死，formdata.append(“file”,item) ，寫為每張圖片的指定name，不然會覆蓋。

<el-upload ref="elupload" action="" multiple :auto-upload="false" :http-request="handleupload"  list-type="picture-card">
	<i class="el-icon-plus"></i>
</el-upload>
<button @click="uploadelupload">點選提交</button>

methods:{
	uploadelupload() {
      let formdata = new FormData()
      this.$refs.elupload.submit(); // 這裡是執行檔案上傳的函式，其實也就是獲取我們要上傳的檔案  
      this.fileList.forEach(item => {
        formdata.append("file",item)  //將每一個檔案圖片都加進formdata
      })
      formdata.append("score",4)
      axios.post("介面地址",handleupload(param) {
      this.fileList.push(param.file);// 一般情況下是在這裡建立FormData物件，但我們需要上傳多個檔案，為避免傳送多次請求，因此在這裡只進行檔案的獲取，param可以拿到檔案上傳的所有資訊
    },}

elementui提交圖片以及其他資料

• 後端讓傳圖片、以及其他資料。
• 注意圖片檔案等：必須使用formdata傳過去
• 其他資料等：用普通方式傳遞

程式碼與上述大體相同、這裡就只寫axios請求格式
let formdata = new FormData()
formdata.append("file",item)  //將每一個檔案圖片都
axios({
	method: "post",url: "介面地址",data: formdata,程式設計客棧
 	params: { score: 4,content: "xxxxx",XNxBHPnK order_detail_id: 24,token: "xxxx" }
}).then(res => { console.log(res) })

總結

到此這篇關於vue上傳圖片檔案的文章就介紹到這了,更多相關vue上傳圖片檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！