vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
类别:编程学习 浏览量:2689
时间:2022-03-29 18:22:24 vuephp后台开发框架
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> <li 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> </li> </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" alt="vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)" border="0" />
四.实际效果
测试成功!
关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- vuetable表格合并(vue-table实现添加和删除)
- vue怎么编写规则(vue使用节流函数的踩坑实例指南)
- vue定时器中间变颜色(Vue如何优雅的清除定时器)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- vue点击导航进行内容切换(vue实现顶部左右滑动导航)
- vue图片怎么上传服务器(vue-cropper组件实现图片切割上传)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- vue组件轮播(vue+rem自定义轮播图效果)
- vue实现展开动画(Vue组件实现旋转木马动画)
- vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
- springboot+vue项目演示(springboot+VUE实现登录注册)
- vue项目的一些手动配置(使用vue项目配置多个代理的注意点)
- vue做个人页面(vue简易记事本开发详解)
- 哪几个历史人物被影协主席李雪健演的活灵活现(哪几个历史人物被影协主席李雪健演的活灵活现)
- 王伦狭隘,晁盖霸道,宋江奸诈骨头软,只有鲁智深才适合当寨主(王伦狭隘晁盖霸道)
- 他是梁山最早的头目,江湖人称 旱地忽律 ,宋江几乎将其遗忘(他是梁山最早的头目)
- 梁山创始人杜迁,为何不受宋江待见,只排名83位(梁山创始人杜迁)
- 法国面包(法国面包法棍)
- 微信(微信分身)
热门推荐
- php实战小实例(php实现推荐功能的简单实例)
- css3基础选择器有哪些(对CSS3选择器的研究详解)
- 云服务器租用需要注意什么(网站云主机租赁时需要注意哪些事项?)
- IQueryable与IEnumberable的区别
- 数据库的乐观锁与悲观锁
- python串口怎么使用(使用Python3+PyQT5+Pyserial 实现简单的串口工具方法)
- 阿里云服务器无法连接(阿里云香港服务器远程连接不上,本地网络都ping不通服务器)
- mysql水平拓展的瓶颈(MySQL令人大跌眼镜的隐式转换)
- vue滚动条下拉翻页(Vue中利用better-scroll组件实现横向滚动功能)
- DateTime.ToString 格式化时间字符串