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前端组件学习教程进行学习。

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

前言

请登录后发表评论