使用axios上传照片
生活随笔
收集整理的這篇文章主要介紹了
使用axios上传照片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
原來使用vue1.0的時候，我們一直使用ajax來發送請求，當接觸新的項目的時候，我們使用了vue2.0,結合著使用了axios來代替ajax。
安裝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>4-或者使用ES6的寫法引入
import axios from 'axios'使用的話可以參考這篇文章：http://www.jianshu.com/p/df464b26ae58
這里我只講一下，如何使用axios上傳照片：
一般情況上傳照片有兩種方式：
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 = thislet 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)})} /* http://172.19.26.60:8081/rest/user/headurl這里是你的服務器接口地址 */其實你可以先在postman中進行測試
這里注意的是，設置 Content-Type
下面附加一個完整的單個實例：
<html><head><title>mayouchen</title></head><script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script><script type="text/javascript">function uploadpic(e){var self = thisconsole.log(e.target);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("222222");console.log(param.get('file')) // FormData私有類對象，訪問不到，可以通過get判斷值是否傳進去let config = {headers: {'Content-Type': 'multipart/form-data'}}// 添加請求頭axios.post('http://xingchen.mengdian.com/rest/user/headurl', param, config).then(response => {console.log("222222");if (response.data.code === 0) {console.log(response.data.data);}console.log(response.data)})}</script><body><div class='form-div'><div class="up-pic"><input name="file" type="file" accept="image/png,image/gif,image/jpeg" onclick="uploadpic(event)"/></div></div></body> </html>總結
以上是生活随笔為你收集整理的使用axios上传照片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 斐讯p.to怎么恢复出厂设置-斐讯路由器
- 下一篇： webstorm设置文件类型