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移动端图片放大效果实现(vue实现图片切换效果)
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vue各种模块(一篇文章学会Vue中间件管道)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- vue动态生成的下拉框如何获取值(Vue 级联下拉框的设计与实现)
- vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- vue加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- vue和springboot分页开发实现(解决Vue+SpringBoot+Shiro跨域问题)
- springboot vue 异地登录(vue+springboot实现登录验证码)
- vue怎么接收后台的数据(Vue封装全局toast组件的完整实例)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- vue引入axios(vue封装axios的几种方法)
- vue中router的具体用法(vue-router中hash模式与history模式的区别)
- 包水饺(包水饺手法怎么包视频)
- 越南河粉(越南河粉来自哪里)
- 按这几方面养护佛肚竹盆景,保证枝叶繁茂,造型优美(按这几方面养护佛肚竹盆景)
- 冰岛旅游攻略(冰岛旅游攻略及花费八日游)
- 寒假旅游攻略(成都寒假旅游攻略)
- 菲律宾旅游攻略(菲律宾旅游攻略地图)
热门推荐
- python scrapy 框架原理(一步步教你用python的scrapy编写一个爬虫)
- sqlserver 高级查询(利用 SQL Server 过滤索引提高查询语句的性能分析)
- flashfxp使用视频教程(FlashFXP 命令行参数)
- asp.net操作cookie
- windows 10中如何安装numpy(windows下numpy下载与安装图文教程)
- 云服务器和虚拟空间有什么区别(云服务器、虚拟机是一样的吗?有什么不同?)
- 怎么查看云服务器的配置(云服务器配置参数如何选择)
- pythonsocket详细用法(Python中的Socket 与 ScoketServer 通信及遇到问题解决方法)
- docker怎么做数据(Docker数据卷常用操作代码实例)
- 阿里云和腾讯云服务器哪个好些(如何提升阿里云和腾讯云服务器速度)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9