Vue+thinkphp5.1+axios實現文件上傳
本文實例為大傢分享瞭使用thinkphp5.1 + Vue+axios+實現文件上傳,供大傢參考,具體內容如下
前言
使用thinkphp5.1 + Vue+axios+實現文件上傳
一.頁面代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>上傳Demo</title> <style> .fileBtn{ width: 180px; height: 36px; line-height: 36px; background: skyblue; border-radius: 5px; display: block; text-align: center; color: white; } [v-cloak] { display: none; } </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h1 v-cloak>{{message}}</h1> <form> <input type="file" name="file" ref="file" id="file" v-on:change="upload" style="visibility: hidden;" /> <label for="file" class="fileBtn">上傳</label> </form> </div> </body> </html> <script> var vue = new Vue({ el:'#app', data:{ message:'文件上傳', }, methods:{ upload:function(file) { console.log(file.target.files[0]); var forms = new FormData() var configs = { headers:{'Content-Type':'multipart/form-data;charse=UTF-8'} }; forms.append('file',file.target.files[0]); axios.post('http://127.0.0.1/index/index/upload', forms,configs) .then(function (response) { if (response.data.code == 0) { alert('文件上傳成功'); } else { alert('文件上傳失敗'); } file.target.value = ''; }) .catch(function (error) { console.log(error); }); } } }); </script>
二、解決接口跨域問題
這裡使用的apache 2.4.8,找到httpd.conf ,添加一行配置:
Header set Access-Control-Allow-Origin *
三.後端處理上傳部分
/** * 文件上傳方法校驗 */ public function upload() { try{ $file = request()->file('file'); if (empty($file)) { echo json_encode(['code' => 1,"msg" => '請選擇上傳文件'],JSON_UNESCAPED_UNICODE);exit; } // 移動到框架應用根目錄/uploads/ 目錄下 $info = $file->move( '../uploads'); if($info){ // 成功上傳後 獲取上傳信息 // 輸出 jpg echo json_encode(['code' => 0,"msg" => 'succcess'],JSON_UNESCAPED_UNICODE);exit; }else{ // 上傳失敗獲取錯誤信息 echo json_encode(['code' => 1,"msg" => 'error'],JSON_UNESCAPED_UNICODE);exit; } } catch (Exception $e) { echo json_encode(['code' => 1,"msg" => 'error'],JSON_UNESCAPED_UNICODE);exit; } }
四.實際效果
測試成功!
關於vue.js的學習教程,請大傢點擊專題vue.js組件學習教程、Vue.js前端組件學習教程進行學習。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 利用node+koa+axios實現圖片上傳和回顯功能
- vue封裝el-upload批量上傳隻請求一次接口
- node+express+axios實現單文件上傳功能
- axios概念介紹和基本使用
- 微信小程序uploadFile接口實現文件上傳