axios 簡介

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

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

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

支持 Promise API

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

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

取消請求

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

客戶端支持防止 CSRF/XSRF

首先安裝axios：

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

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

3.直接利用cdn引入

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

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

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

2.通過form表單提交。

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

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

html代碼：

js代碼：

import axios from 'axios'

// 添加請求頭

update (e) { // 上傳照片

var self = this

let file = e.target.files[0]

/* eslint-disable no-undef */

let param = new FormData() // 創(chuàng)建form對象

param.append('file', file, file.name) // 通過append向form對象添加數(shù)據(jù)

param.append('chunk', '0') // 添加form表單中其他數(shù)據(jù)

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)

})

}

總結(jié)

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

本文標(biāo)題: vue項目中使用axios上傳圖片等文件操作

本文地址: http://www.cppcns.com/wangluo/javascript/209663.html

總結(jié)

以上是生活随笔為你收集整理的axios nodejs 上传图片_vue项目中使用axios上传图片等文件操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。