Vue+thinkphp5.1+axios实现文件上传
更新时间：2021年08月24日 11:45:14 作者：々橙若℃ №
这篇文章主要为大家详细介绍了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前端组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
由于Vue多个状态分散的跨越在许多组件和交互间各个角落，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue提供了vuex。本文将详细介绍Vue状态管理vuex,需要的朋友可以参考下2020-02-02
这篇文章主要为大家介绍了如何简单实现vue验证码60秒倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
本篇文章主要介绍了Vue filter介绍及其使用详解，VueJs 提供了强大的过滤器API，能够对数据进行各种过滤处理。一起跟随小编过来看看吧2017-10-10
最近公司需要做个项目,需要拖拽表格和自定义表格字段,本文主要介绍了vue中el-table实现可拖拽移动列和动态排序字段,具有一定吃参考价值,感兴趣的可以了解一下2023-12-12
在Vue项目中使用v-if指令控制ECharts图表显示时,可能会遇到图表无法正常渲染或显示错误的问题,下面这篇文章主要介绍了Vue中使用ECharts与v-if的问题和解决方案,需要的朋友可以参考下2024-10-10
vue+ElementPlus框架Container 布局容器不能铺满整个屏幕的解决方案
这篇文章主要介绍了vue+ElementPlus框架Container 布局容器不能铺满整个屏幕的解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要为大家详细介绍了Vue编写一个挺靠谱的多地区选择组件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要为大家详细介绍了原生echart和vue-echart的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-06-06
vueJs函数readonly与shallowReadonly使用对比详解
这篇文章主要为大家介绍了vueJs函数readonly与shallowReadonly使用对比详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论