vue如何實(shí)現(xiàn)上傳圖片文件

這篇文章給大家分享的是有關(guān)vue如何實(shí)現(xiàn)上傳圖片文件的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

原始input標(biāo)簽form表單上傳

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

methods: {
 	onchangemd(e){
		console.log(e.target.files)//這個(gè)就是選中文件信息
		let formdata = new FormData()
		Array.from(e.target.files).map(item => {
         console.log(item)
         formdata.append("file", item)  //將每一個(gè)文件圖片都加進(jìn)formdata
       })
       axios.post("接口地址", formdata).then(res => { console.log(res) })
	}
 }

當(dāng)看到二進(jìn)制提交數(shù)據(jù)，就成功了（binary）

這種也是成功的（是二進(jìn)制的展開(kāi)數(shù)據(jù)。因?yàn)橛行g覽器不顯示binary）

上圖可以看出 傳統(tǒng)上傳文件是以二進(jìn)制的格式formdata格式提交

用elementui自帶的el-upload上傳

<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本來(lái)就是數(shù)組，就不用轉(zhuǎn)為真數(shù)組了
        formdata.append("file", item.raw)  //將每一個(gè)文件圖片都加進(jìn)formdata
      })
       axios.post("接口地址", formdata).then(res => { console.log(res) })
    },

不用設(shè)置請(qǐng)求頭等（直接用FormData格式提交就行），當(dāng)看到formdata數(shù)據(jù)為二進(jìn)制就說(shuō)明提交正常（binary），同樣有些瀏覽器不顯示binary，以------WebKitFormBoundaryXoZpi2juymcNoW0l 開(kāi)頭的這種也是提交正常的

注意fileList數(shù)組中的raw才是真實(shí)文件數(shù)據(jù)，如果直接用item而不是item.raw，那么會(huì)報(bào)500錯(cuò)誤，并且formdata中的數(shù)據(jù)不是二進(jìn)制而是對(duì)象格式

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

 elementui

elementui實(shí)現(xiàn)一次性上傳多張圖片

注意： 管用思維，點(diǎn)擊提交然后觸發(fā)表單提交事件，然后表單提交事件中發(fā)起請(qǐng)求。

結(jié)果： 上傳每張圖片都需要發(fā)起請(qǐng)求，即會(huì)發(fā)起多次請(qǐng)求

處理： 在submit階段（即this.$refs.xxx.submit() 這步就發(fā)起請(qǐng)求），在提交函數(shù)中僅僅只進(jìn)行圖片獲取

多張圖片上傳最后一個(gè)注意點(diǎn)： 多張圖片的這個(gè)file不能寫(xiě)死，formdata.append(“file”, item) ，寫(xiě)為每張圖片的指定name，不然會(huì)覆蓋。

<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">點(diǎn)擊提交</button>

methods:{
	uploadelupload() {
      let formdata = new FormData()
      this.$refs.elupload.submit(); // 這里是執(zhí)行文件上傳的函數(shù)，其實(shí)也就是獲取我們要上傳的文件  
      this.fileList.forEach(item => {
        formdata.append("file", item)  //將每一個(gè)文件圖片都加進(jìn)formdata
      })
      formdata.append("score", 4)
      axios.post("接口地址", formdata).then(res => { console.log(res) })
    },
    handleupload(param) {
      this.fileList.push(param.file);// 一般情況下是在這里創(chuàng)建FormData對(duì)象，但我們需要上傳多個(gè)文件，為避免發(fā)送多次請(qǐng)求，因此在這里只進(jìn)行文件的獲取，param可以拿到文件上傳的所有信息
    },
}

elementui提交圖片以及其他數(shù)據(jù)

• 后端讓傳圖片、以及其他數(shù)據(jù)。

• 注意圖片文件等：必須使用formdata傳過(guò)去

• 其他數(shù)據(jù)等：用普通方式傳遞

代碼與上述大體相同、這里就只寫(xiě)axios請(qǐng)求格式
let formdata = new FormData()
formdata.append("file", item)  //將每一個(gè)文件圖片都
axios({
	method: "post",
 	url: "接口地址",
	data: formdata,
 	params: { score: 4, content: "xxxxx", order_detail_id: 24, token: "xxxx" }
}).then(res => { console.log(res) })

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

感謝各位的閱讀！關(guān)于“vue如何實(shí)現(xiàn)上傳圖片文件”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！