vue項目中如何使用axios上傳圖片

這篇文章將為大家詳細講解有關vue項目中如何使用axios上傳圖片，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

axios 簡介

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

從瀏覽器中創建 XMLHttpRequest

從 node.js 發出 http 請求

支持 Promise API

攔截請求和響應

轉換請求和響應數據

取消請求

自動轉換JSON數據

客戶端支持防止 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.本地圖片轉換成base64，然后通過普通的post請求發送到服務端。

　　操作簡單，適合小圖，以及如果想兼容低版本的ie沒辦法用此方法

2.通過form表單提交。

　　form表單提交圖片會刷新頁面，也可以時form綁定到一個隱藏的iframe上，可以實現無刷新提交數據。

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

html代碼：

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

js代碼：

import axios from 'axios'
// 添加請求頭
update (e) {  // 上傳照片
   var self = this
   let file = e.target.files[0]
   /* eslint-disable no-undef */
   let param = new FormData() // 創建form對象
   param.append('file', file, file.name) // 通過append向form對象添加數據
   param.append('chunk', '0') // 添加form表單中其他數據
   console.log(param.get('file')) // FormData私有類對象，訪問不到，可以通過get判斷值是否傳進去
   let config = {
    headers: {'Content-Type': 'multipart/form-data'}
   }
   // 添加請求頭
  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)
    })
  }

關于“vue項目中如何使用axios上傳圖片”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。