Vue+thinkphp5.1+axios實(shí)現(xiàn)文件上傳
本文實(shí)例為大家分享了使用thinkphp5.1 + Vue+axios+實(shí)現(xiàn)文件上傳，供大家參考，具體內(nèi)容如下
前言使用thinkphp5.1 + Vue+axios+實(shí)現(xiàn)文件上傳
一.頁面代碼
<!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' v-on:change='upload' /><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 *
三.后端處理上傳部分
/** * 文件上傳方法校驗(yàn) */ public function upload() {try{ $file = request()->file(’file’); if (empty($file)) {echo json_encode([’code’ => 1,'msg' => ’請(qǐng)選擇上傳文件’],JSON_UNESCAPED_UNICODE);exit; } // 移動(dòng)到框架應(yīng)用根目錄/uploads/ 目錄下 $info = $file->move( ’../uploads’); if($info){// 成功上傳后 獲取上傳信息// 輸出 jpgecho json_encode([’code’ => 0,'msg' => ’succcess’],JSON_UNESCAPED_UNICODE);exit; }else{// 上傳失敗獲取錯(cuò)誤信息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;}}
四.實(shí)際效果
測(cè)試成功!
關(guān)于vue.js的學(xué)習(xí)教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 概述IE和SQL2k開發(fā)一個(gè)XML聊天程序2. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)3. 讀大數(shù)據(jù)量的XML文件的讀取問題4. ASP基礎(chǔ)知識(shí)Command對(duì)象講解5. ASP基礎(chǔ)入門第八篇（ASP內(nèi)建對(duì)象Application和Session）6. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器7. 解析原生JS getComputedStyle8. Jsp中request的3個(gè)基礎(chǔ)實(shí)踐9. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法10. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）
網(wǎng)公網(wǎng)安備