纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

々橙若℃ №   2021-05-17 我要评论
想了解Vue+thinkphp5.1+axios实现文件上传的相关内容吗々橙若℃ №在本文为您仔细讲解Vue文件上传的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue,thinkphp5.1,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.js 图片上传 vue.js云存储实现图片上传功能

    想了解vue.js云存储实现图片上传功能的相关内容吗辣可乐少加冰在本文为您仔细讲解vue.js 图片上传的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue.js,图片上传,vue.js云存储图片上传下面大家一起来学习吧。..
  • torchtext导入NLP数据集 使用torchtext导入NLP数据集的操作

    想了解使用torchtext导入NLP数据集的操作的相关内容吗邓旭东HIT在本文为您仔细讲解torchtext导入NLP数据集的相关知识和一些Code实例欢迎阅读和指正我们先划重点:torchtext,导入NLP数据集,NLP数据集下面大家一起来学习吧。..

网友评论

Copyright 2020 www.Shellfishsoft.com 【贝软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式