vue項(xiàng)目中使用axios上傳圖片等文件操作

更新時(shí)間：2017年11月02日 08:32:51 作者：風(fēng)雨后見(jiàn)彩虹

axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要給大家介紹了vue項(xiàng)目中使用axios上傳圖片等文件操作，需要的朋友參考下吧

axios 簡(jiǎn)介

axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：

從瀏覽器中創(chuàng)建 XMLHttpRequest

從 node.js 發(fā)出 http 請(qǐng)求

支持 Promise API

攔截請(qǐng)求和響應(yīng)

轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)

取消請(qǐng)求

自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)

客戶端支持防止 CSRF/XSRF

首先安裝axios：

1.利用npm安裝npm install axios –save

2.利用bower安裝bower install axios –save

3.直接利用cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

一般情況上傳照片有兩種方式：

1.本地圖片轉(zhuǎn)換成base64，然后通過(guò)普通的post請(qǐng)求發(fā)送到服務(wù)端。

　　操作簡(jiǎn)單，適合小圖，以及如果想兼容低版本的ie沒(méi)辦法用此方法

2.通過(guò)form表單提交。

　　form表單提交圖片會(huì)刷新頁(yè)面，也可以時(shí)form綁定到一個(gè)隱藏的iframe上，可以實(shí)現(xiàn)無(wú)刷新提交數(shù)據(jù)。

這里只講解一下第二種方式：

html代碼：

<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

js代碼：

import axios from 'axios'
// 添加請(qǐng)求頭
update (e) {  // 上傳照片
   var self = this
   let file = e.target.files[0]
   /* eslint-disable no-undef */
   let param = new FormData() // 創(chuàng)建form對(duì)象
   param.append('file', file, file.name) // 通過(guò)append向form對(duì)象添加數(shù)據(jù)
   param.append('chunk', '0') // 添加form表單中其他數(shù)據(jù)
   console.log(param.get('file')) // FormData私有類(lèi)對(duì)象，訪問(wèn)不到，可以通過(guò)get判斷值是否傳進(jìn)去
   let config = {
    headers: {'Content-Type': 'multipart/form-data'}
   }
   // 添加請(qǐng)求頭
  axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config)
    .then(response => {
     if (response.data.code === 0) {
      self.ImgUrl = response.data.data
     }
     console.log(response.data)
    })
  }

總結(jié)

以上所述是小編給大家介紹的vue項(xiàng)目中使用axios上傳圖片等文件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

實(shí)現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式
今天小編就為大家分享一篇實(shí)現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
詳解Vue與VueComponent的關(guān)系
這篇文章主要為大家介紹了Vue與VueComponent的關(guān)系，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
vue-cli3配置與跨域處理方法
這篇文章主要介紹了vue-cli3配置與跨域處理方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
vue.js?自定義指令（拖拽、拖動(dòng)、移動(dòng)）?指令?v-drag詳解
這篇文章主要介紹了vue.js?自定義指令（拖拽、拖動(dòng)、移動(dòng)）?指令?v-drag,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
Vue 3 + Element Plus樹(shù)形表格全選多選及子節(jié)點(diǎn)勾選的問(wèn)題解決方
在本文中,我們解決了Vue 3和Element Plus樹(shù)形表格中的全選、多選、子節(jié)點(diǎn)勾選和父節(jié)點(diǎn)勾選等常見(jiàn)問(wèn)題,通過(guò)逐步實(shí)現(xiàn)這些功能,您可以構(gòu)建功能強(qiáng)大且用戶友好的樹(shù)形表格組件,以滿足各種數(shù)據(jù)展示需求,對(duì)Vue 3 Element Plus樹(shù)形表格相關(guān)知識(shí)感興趣的朋友一起看看吧
2023-12-12
vue如何清除瀏覽器歷史棧
這篇文章主要介紹了vue如何清除瀏覽器歷史棧，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue使用ECharts實(shí)現(xiàn)折線圖和餅圖
這篇文章主要為大家詳細(xì)介紹了vue使用ECharts實(shí)現(xiàn)折線圖和餅圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能
這篇文章主要介紹了使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
詳解Vue中的自定義指令
這篇文章主要介紹了Vue中的自定義指令的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
2020-12-12
詳解vue頁(yè)面狀態(tài)持久化詳解
這篇文章主要為大家介紹了vue頁(yè)面狀態(tài)持久化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12