如何使用vue的axios結合PHP去上傳檔案

2022-01-21 11:39:32 字數 1063 閱讀 1857

我們在做表單提交的時候,往往會碰到一些表單提交的需求,那vue的axios與上傳檔案碰撞後不會出現什麼不一樣的火花嗎,聽我一一道來:

首先,我們需要對寫乙個vue的axios的表單提交,由於本人用的是webpack,so**:

div

input(type="file", ref="yin")

button(@click="submit()") 點選上傳

用的是pug的模板,也可以換成html的,無傷大雅,主要看js邏輯**,首先宣告乙個formdata的物件,然後在進行post傳值,這個時候的url是我用wamp裡面的乙個php檔案,檔案如下:

<?php 

/** * created by phpstorm.

* user: dell

* date: 2017/11/23

* time: 10:57

*/header("access-control-allow-origin:*");

// 響應型別

header('access-control-allow-methods:post');

// 響應頭設定

header('access-control-allow-headers:x-requested-with, content-type');

header("content-type: text/html; charset=utf-8");

$file = $_files["file"];

if ($file["error"] > 0) else else }}

一定要看清楚結構,不然上傳的檔案無法儲存起來,

php裡面的提頭部資訊解決了跨域的問題和utf-8轉碼解決亂碼的問題,然後再把得到的檔案放到upload資料夾當中;

如下:

完美

vue結合axios傳遞引數

首先要安裝好axios import axios from axios 匯入axios export default args testinte ce args 把form表單轉json格式 function fromjson json vue中方法 methods else testfun2 cf...

vue中如何使用axios

npm install axios在main.js中引入import axios from axios 然後在vue原型上新增vue.prototype.axios axiosthis.axios或者axios 1.引數一表示請求位址 2.引數二表示配置資訊 3.params表示傳遞到伺服器端的資料...

async await結合axios使用

async 和 await是es7的語法 async和await必須結合使用,有await必須要使用async,有async不一定要使用await,await是將非同步轉為同步 用async修飾的事件,如果有retrun返回,則返回的是promise物件 async修飾的非同步事件a,在其他方法b中...