axios nodejs 上传图片_Vue Axios跨域、文件上传
本文以vue-cli中使用axios為例
安裝
npm install --save axios
引用(注冊到VUE實例中)
import Vue from 'vue'
import Axios from 'axios'
//querystring 為nodejs 內置模塊 在post 請求中使用到 寫在這里是防止不小心將import 語句寫在代碼區塊內的伙伴
//作用 將 類似 {a:'aa',b:'bb'} 與 a=aa&b=bb 類型的互相轉換編碼
import querystring from 'querystring' // 或者 import qs from 'qs'
Vue.prototype.$querystring=qs
//create([options]) 方法允許設置一些默認的配置 (可選) 如下:
const axios=Axios.create({
baseURL:'http://127.0.0.1/', // 通常配置基礎的接口入口地址
timeout:5000, // 請求超時時間
headers:{// 這里可設置所有的請求頭
'Content-Type':'application/x-www-form-urlencoded', //該項建議設置 如果未 POST請求時 數據未做處理時會出現錯誤，最理想的解決方法就是 直接設置該項
},
withCredentials:true,//是否允許發送Cookie 如果為true 則服務器的 Access-control-Allow-Credentials 必須為 true 來源為 XMLHttpRequest的withCredentials配置項
// 以下兩項為攔截器配置 可最后再看
transformRequest: [function (data) {//準備發送請求觸發的事件 類型：Array || Function 可以是一個函數或數組 data 為發送的數據 get 為undefined
console.log('準備發送請求：',data)
// 此處可對發送的數據進行處理
return data; //最終數據
}],
transformResponse: [function (data) {//接收到數據首先處理的函數 ，data 為服務器返回的數據(// 1.響應結構 里的 rs.data)
console.log('接收到數據：',data)
return data;//最終數據
},function (data) {//當為數組時 竄行操作 data 為上一步中的最終數據
console.log('before',data)
return data;
}],
})
axios.all=Axios.all; // 由于使用create方法返回的 實例缺少了 all 方法 在這里 加進去 all() 方法主要用于并發請求 , 在文章末尾講解
Vue.prototype.$http=axios; // 綁定到 Vue 實例中 如果不進行create()配置可直接：Vue.prototype.$http=Axios;
// 注：后續使用 只需 const axios=this.$http; 即可.
注：withCredentials:true 項開啟可實現服務器與前端互通cookie、session
跨域請求服務器配置(此處以php為例 ，簡單說就是設置服務器 headers)
header('Access-Control-Allow-Origin:*'); // 遠程訪問權限允許所有(該項必須設置)
//注：如果 Access-control-Allow-Credentials 為 true 則 Access-Control-Allow-Origin 必須 設置確定的域名 不能使用通配符。如下：
header('Access-Control-Allow-Origin:http://127.0.0.1:8080');
header('Access-control-Allow-Credentials:true');//默認 false 是否同意發送Cookie 如果前端請求 withCredentials:true 則該項須設置為true
header('Access-control-Allow-Methods:GET,POST');//可選 遠程請求方法控制 (get post put delete ......)
注：Access-control-Allow-Credentials:true 項開啟可實現服務器與前端互通cookie、session
GET 請求
axios.get(url,[configs])
url：請求的接口地址 如果為相對路徑則 會在 url 前加上 配置項中的 baseURL 型如：baseURL+url
configs 臨時的配置項 僅對當次請求有效 (可選)
// 如下 可針對不同的請求進行特例配置設置
this.$http.get('/api.php',{
//baseURL:'http://127.0.0.1/axios/',
//timeout:10000,
})
.then(rs=>{// axios 實現了 Promise 接口 then 方法即是我們的請求成功回調 傳入的參數 rs 為返回數據 (1.響應結構)
console.log(rs)
})
.catch(err=>{// Promise 接口 catch 方法 為錯誤處理回調 err 為錯誤信息
console.log(err)
})
// 1.響應結構：
{
data:Array, //我們從返回的數據
status:200, //服務器狀態碼
statusText:'ok', //服務器相應碼信息
config:Object, //當次請求的axios配置信息
headers:Object, //服務響應頭
request:XMLHttpRequest // xhr 對象
}
POST 請求
axios.post(url,data,[configs])
url：請求的接口地址 如果為相對路徑則 會在 url 前加上 配置項中的 baseURL 型如：baseURL+url
data POST數據 (Object、String、FormData、URLSearchParams 、ArrayBuffer ......)
configs 臨時的配置項 僅對當次請求有效 (可選)
let data={
title:'POST傳輸',
content:'通常以一個對象直接發送，服務器所收到的數據并不是期望的那樣！',
}
// post 請求如果data 為空請傳 {} 省略將出現錯誤警告
// 我們在開頭說到 querystring 模塊在此處使用的問題 。以下`#`號內的代碼如果不寫 那么服務器接收到的數據是會有很大差別的。 可先自行試驗。
// 當然大部分人都說使用 URLSearchParams 或者 FormData進行處理，但我覺得有點啰嗦。
// ###################這是井號#####################
data=this.$querystring.stringify(data)
// ###################這是井號#####################
this.$http.post('/api.php',data)
.then(rs=>{
console.log(rs)
})
POST+FormData 實現跨域異步上傳
FormData是什么？請點擊 FormData對象參考
單文件上傳 例：
export default {
data(){
return {
imgUrl:'',
}
},
methods:{
uploads(e){
const file=e.target.files[0];//獲取到當前文件對象
let URL=window.URL||window.webkitURL; // 與上傳沒有關系(可選)
this.imgUrl=URL.createObjectURL(file); // 這是為了顯示圖片而已， 與上傳沒有關系(可選)
// 傳遞一個 FormData 對象 即可
let formData=new FormData();
formData.append('file',file); // 'file' 可變 相當于 input 表單的name 屬性
// 服務器只需按照正常的上傳程序代碼即可
this.$http.post('/upload.php',formData).then(rs=>{
console.log(rs.data)
}).catch(err=>{
console.log(err)
})
},
}
}
多文件上傳 例：
uploadAll
export default {
data(){
return {
images:[],//顯示圖片所用 與上傳沒有關系(可選)
formData:new FormData(),//在此處初始化時,即實例化 FormData
}
},
methods:{
uploads(e){
const file=e.target.files[0];
let URL=window.URL||window.webkitURL;// 與上傳沒有關系(可選)
this.images.push(URL.createObjectURL(file)) // 這是為了顯示圖片而已， 與上傳沒有關系(可選)
this.formData.append('file[]',file); // 'file[]' 代表數組 其中`file`是可變的
},
uploadAll(){
//當點擊上傳時直接上傳 服務器按照正常的多文件上傳操作即可
this.$http.post('/a.php',this.formData).then(rs=>{
console.log(rs.data)
}).catch(err=>{
console.log(err)
})
}
}
}
并發請求
// 首先需要并發的聲明操作方法a()、b()如下
function a() {
return this.$http.get('/a.php');
}
function b() {
let data={
val:"來自http://127.1.0.1:8080的POST請求",
}
return this.$http.post('/b.php',this.$querystring.stringify(data));
}
// all()方法接收一個數組 數組的項目 即為 并發方法
this.$http.all([a(),b()])
.then(rs=>{
// rs 為一個數組 每一項對應 all 方法中 對應的并發方法 的返回值
console.log(rs)
})
總結
以上是生活随笔為你收集整理的axios nodejs 上传图片_Vue Axios跨域、文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 百兆以太网传输距离_新品推荐 16+2G
- 下一篇： 插入顶部_轻巧的衣领插入技术