vue与laravel ajax文件上传【带进度条】

原创 2017年05月04日 14:00:52

HTML表单:

			<form class="form-horizontal" role="form" id="upFileForm" enctype="multipart/form-data">
                            <input type="hidden" name="enterprise_id" v-bind:value="enterprise_id">
                            <div class="form-group">
                                <div class="well">
                                    <label for="file" class="col-sm-2 control-label">选择附件</label>
                                    <input type="file" id="file" name="attachment" @change="fileChange(e)"><br>

                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-success" role="progressbar" id="uploadprogress"
                                             v-bind:aria-valuenow="uploadprogress" aria-valuemin="0" aria-valuemax="100"
                                             v-bind:style="'width:'+uploadprogress+'%'">
                                            <span >{{uploadprogress}}% 完成</span>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-sm-6">
                                    <img v-if="contEnclosure.imgsrc" :src="contEnclosure.imgsrc" class="img-thumbnail" id="imgpreview">
                                </div>

                            </div>
                        </form>

vue前端处理代码:

/**
                 * 上传合同附件
                 */
                uploadContractFile:function () {
                    var _this=this;
                    if(!$('#file').val()){
                        alert('尚未选择文件');
                        return;
                    }
                    var myform = document.getElementById('upFileForm');
                    //var fileObj = $("#file").files[0]; // 获取文件对象

                    // FormData 对象
                    var formData = new FormData(myform);

                    var postURL = 'leasecontract/upload/'+this.contract_id;

//                    this.$http.post(postURL,formData).then(res=>{
//                        console.dir(res.toString())
//                    });

                    var xhr = new XMLHttpRequest();



                    xhr.open('POST', postURL);

                    xhr.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content'));//设置请求头 csrf-token

                    // 定义上传完成后的回调函数
//                    xhr.onload = function () {
//                        if (xhr.status === 200&&xhr.readyState == 4) {
//                            alert('上传成功',xhr.responseText);
//                        } else {
//                            alert('出错了');
//                        }
//                    };

                    xhr.onreadystatechange=function () {
                        if (xhr.status == 200) {
                            if(xhr.readyState == 4){
                                var data = JSON.parse(xhr.responseText);
                                if(data.code==1){
                                    _this.success('Tip:',code.message);
                                }
                            }
                        } else {
                            _this.fail('出错了');
                        }
                    }

                    //显示上传进度条
                    xhr.upload.onprogress = function (event) {
                        if (event.lengthComputable) {
                            var complete = (event.loaded / event.total * 100 | 0);
                            _this.uploadprogress = complete;
                        }
                        if(_this.uploadprogress==100){
                            _this.success('上传成功!');
                        }
                    };
                    //发送xhr请求
                    xhr.send(formData);

                },
                /**
                 * 文件预上传处理
                 */
                fileChange (e) {
                    var _this = this;

                    this.contEnclosure.imgsrc='';
                    this.uploadprogress=0;

                    if (typeof FileReader == "undefined") {
                        alert("您的浏览器不支持FileReader接口!");
                    }

                    var reader = new FileReader();

                    var fileTypeStr = 'pdf jpg jpeg png';//允许的文件类型 首次判断 file的type
                    var fileType = ['pdf','jpg','jpeg','png'];//允许的文件类型 二次判断 name的后缀
                    var file = $('#file')[0].files[0];//获取文件对象
                    var fileName = file.name;
                    var theFileTypeStr = file.type;
                    var theFileType = theFileTypeStr.split("\/")[1];//所选文件类型


                    if (fileTypeStr.indexOf(theFileType.toLocaleLowerCase()) == -1) {
                        if(!_this.is_inType(fileType,fileName.split('.')[1])){
                            alert("请确保文件类型为 doc docx pdf jpg jpeg png的其中一种!");
                            $('#file').val('');
                        }
                    }

                    //判断是否是图片类型,如果是则给出文件预览
                    if (!/image\/\w+/.test(file.type)) {
                        _this.contEnclosure.imgsrc='';
                    } else {
                        reader.readAsDataURL(file);
                        reader.onload = function (e) {
                            //console.log('图片获取结果:',this.result);
                            _this.contEnclosure.imgsrc=this.result;
                        }
                    }
                },
                /**
                 * 判断文件类型是否合法
                 * @param fileType
                 * @param type
                 * @returns {boolean}
                 */
                is_inType:function(fileType,type) {
                    var len = fileType.length;
                    while (len--){
                        if(fileType[len]==type){
                            return true;
                        }
                    }
                    return false;
                },
                resetFile:function () {
                    $('#file').val('');
                    this.contEnclosure.imgsrc='';
                    this.uploadprogress=0;
                },
laravel 后端文件上传处理代码:


public function upload($contract_id, Request $request){
        if ($request->hasFile('attachment') && $contract_id) {
            $enterprise_id = $request->enterprise_id;
            $path = 'storage/contracts/'.$enterprise_id;
            if(!file_exists($path)){
                mkdir($path,0777,true);
                chmod($path,0777);
            }
            $files = $request->file('attachment');
            $ext = $files -> getClientOriginalExtension();
            $uniName = md5(uniqid(microtime(true),true));
            $c_name = $uniName.'.'.$ext;
            $c_path = $path.'/'.$uniName.'.'.$ext;
            $files->move($path, $c_name);
            $name = $request->attachment->getClientOriginalName();
            $data['contract_id'] = $contract_id;
            $data['enterprise_id'] = $enterprise_id;
            $data['attachment'] = $c_path;
            $data['type'] = $ext;
            $data['remark'] = $name;

            UploadContracts::insert($data);
            return $this->request_success_json('添加成功');
        } else {
            return $this->request_failed_json('参数缺失');
        }
    }


laravel 后端文件上传处理代码:

版权声明:本文为博主原创文章,未经博主允许不得转载。

Vue组件库之进度条(progressbar)组件

效果图 首先我们看一下进度条组件运行出来的效果,如下图显示 进度条组件 实现过程 项目搭建 progressbar组件在一个可以直接运行的npm包,通...
  • enterlind
  • enterlind
  • 2017年03月08日 13:54
  • 9056

vue开发:VUE axios发送跨域请求需要注意的问题

在实际项目中前端使用到vue,后端使用php进行开发。前端使用axios请求请求 关于跨域 跨域的概念这些就不说了,百度一大堆相关的资料信息。我就只在这里记录下我在使用当中遇到的问题,...
  • Generon
  • Generon
  • 2017年10月20日 09:58
  • 653

Laravel5.5 + Vue2 + Element 环境搭建

更新说明 2018 年 1 月 25 日更新 开始写这篇文章时,Element 的版本还是 1.4,现在已经来到 2.0 了,有些步骤需要修改,特此说明。 第 9 步,修改 Hello.vu...
  • mrzhouxiaofei
  • mrzhouxiaofei
  • 2017年09月18日 09:06
  • 3678

vue是怎么做到前端分离的--脱离laravel为例

首先表示折腾了十来天的php-laravel框架和vue的结合开发又偏前端实在是太大的阻碍,首先laravel的机制就是写完路由router再加载blade模板的.如果要在laravel工程里面加载一...
  • wmwmdtt
  • wmwmdtt
  • 2016年12月30日 20:10
  • 7732

vue 页面加载进度条组件

页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验但是从开发角度讲,这种进度条在真实性上确实很难把...
  • sjn0503
  • sjn0503
  • 2017年07月25日 15:24
  • 3923

Ajax异步文件上传与NodeJS express服务端处理

为了避免在实现简单的异步文件上传功能时候引入一个第三方库文件的尴尬情形(库文件可能造成多余的开销,拉低应用加载速度,尤其是在引入库文件之后仅使用其中一两个功能的情况下,性价比极低),最近了解了一下文件...
  • hongchh
  • hongchh
  • 2017年03月30日 22:11
  • 2802

在vue项目中使用Nprogress.js进度条

Ajaxyy应用程序的细长进度条。灵感来自Google,YouTube和Medium。在vue中使用nprogress.js安装$ bower install --save nprogress $ n...
  • qq_35844177
  • qq_35844177
  • 2017年04月14日 12:37
  • 5249

jQuery监听文件上传实现进度条效果

博客原文地址 原理:给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程 var xhr=new XMLHttpRequest(); xhr.upload.o...
  • u014569030
  • u014569030
  • 2016年03月25日 15:57
  • 1138

通过ajax上传excel

html: li> span>上       传:span> span class="i...
  • veiveid
  • veiveid
  • 2017年09月19日 13:09
  • 1801

html5 ajax文件上传

投诉 content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable...
  • cbxjj
  • cbxjj
  • 2016年02月24日 13:55
  • 1791
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:vue与laravel ajax文件上传【带进度条】
举报原因:
原因补充:

(最多只允许输入30个字)