axios 簡介

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引入

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

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

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

2.通過form表單提交。

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

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

html代碼：

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) // 通過append向form對(duì)象添加數(shù)據(jù)

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

console.log(param.get('file')) // FormData私有類對(duì)象，訪問不到，可以通過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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持！

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

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

總結(jié)

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

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