Vue+thinkphp5.1+axios实现文件上传

Vue+thinkphp5.1+axios实现文件上传

本文实例为大家分享了使用thinkphp5.1 + Vue+axios+实现文件上传，供大家参考，具体内容如下

前言

使用thinkphp5.1 + Vue+axios+实现文件上传

一.页面代码

       
 
二、解决接口跨域问题
 
这里使用的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前端组件学习教程进行学习。
 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
 内容推荐：免费高清PNG素材下载

/phpzx/47387.htmlwww.phpzy.comtrue/phpzx/47387.htmlTechArticleVue+thinkphp5.1+axios实现文件上传 本文实例为大家分享了使用thinkphp5.1 + Vue+axios+实现文件上传，供大家参考，具体内容如下 前言 使用thinkphp5.1 + Vue+axios+实现文件上传 一.页面代码 二、解决...