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

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

赞 (0)

相关推荐

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • 基于vue+axios+lrz.js微信端图片压缩上传方法

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能按指定尺寸压缩处理 4.上传图片可以从相册中选择或者直接拍照 遇到的坑 采用微信JSSDK上传图片 在之前开发的项目中(mui + jquery),有使用过微信JSSDK的接口上传图片,本想应该能快速迁移至此项目.事实证明编程没有简单的事: 1.按指定尺寸压缩图片 JSSDK提供的接口wx.choo

  • Vue axios 中提交表单数据(含上传文件)

    我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport

  • vue+element-ui+axios实现图片上传

    本文实例为大家分享了vue+element-ui+axios实现图片上传的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples<

  • vue实现axios图片上传功能

    vue中实现图片上传,我这里使用的是FormData通过axios向后台发送请求,从而实现图片的上传. 在发起请求的axios中一般用qs进行序列化,但是序列化之后,FormData就传送失败,所以要区别传送的数据类型. 经过多次摸索总结了以下经验,以供参考. 首先创建一个文件夹services ,里面有两个文件 index.js 和 api.js. 我们的qs序列化和数据拦截写在index.js中 import axios from "axios"; import config fr

  • vue使用axios实现文件上传进度的实时更新详解

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 引入方式: $ npm install axios //使用淘宝源 $ cnpm install axios //或者使用cdn: <script s

  • vue使用axios上传文件(FormData)的方法

    在此主要介绍 如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单.模拟表单提交,当然最大的优势就是可以上传二进制文件. 过多介绍不说,过多的煽情语句不说,直接来来干活,希望对广大博友有所帮助.也希望各位大神不吝赐教 1.前台上传文件的表单和响应函数 <!--文件上传表单--> <form> <input type="text" value="&

  • vue中使用axios post上传头像/图片并实时显示到页面的方法

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&q

  • vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)

    vue-cli+axios实现附件上传下载记录: 上传: 这里用formData格式传递参数:请求成功后后台返回上传文件的对应信息. 重点是下载: ############## downloadfile(res) { var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //applicati

  • Vue使用axios图片上传遇到的问题

    Vue使用axios图片上传遇到的问题

    FormData是个什么鬼? 经过多方搜索调查了解,这个神奇的东西是XMLHttpRequest Level 2 新增的一个对象,于2008年2月提出,可以利用它来提交表单.模拟表单提交,当然最大的优势就是可以上传二进制文件,可以把所有表单元素的name与value组成一个queryString,提交到后台. 划重点: 可以把所有表单元素的name与value组成一个queryString,提交到后台.这不就是后端所谓的转换数据格式,按格式提交呗,前后端分离肯定是异步提交,这个就可以很好的去解决

随机推荐