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

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

前言

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

一.页面代码

    
    
    
    
    



    
{{message}}
    

        
        上传
    

二、解决接口跨域问题

这里使用的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前端组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。