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包,通...

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

Ajaxyy应用程序的细长进度条。灵感来自Google,YouTube和Medium。在vue中使用nprogress.js安装$ bower install --save nprogress $ n...

VUE 更好的 ajax 上传处理 axios.js

vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。 首先就是引入axios,如果你使用es6,只需要安装ax...

js实现图片上传预览及进度条

js实现图片上传预览及进度条      最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下:      1:去除浏览器默认的...

利用js实现无刷新上传头像(或文件)并显示进度条

无刷新上传原理:现在我们利用新技术FormData表单数据对象可以实现快速收集表单信息,普通表单域 和 上传文件域 均可以收集,再结合ajax就可以实现无刷新上传。 那么怎样显示进度条呢?原来aja...

通过Ajax方式上传文件,使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件: Html代码   form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/re...

VUE 更好的 ajax 上传处理 axios.js

vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。 首先就是引入axios,如果你使用es6,只需要安装axio...

vue 页面加载进度条组件

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

jQuery插件AjaxFileUpload实现文件上传

jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法。 使用说...

从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]

之前用Vue做了一个基础的组件 vue-img-inputer ,下面就叫 vii ,记录下在开发过程中遇到的 知识点 (都算比较基础,具体代码不会贴太多,都可以在 项目 仓库里看到)。 上传文件很...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:vue与laravel ajax文件上传【带进度条】
举报原因:
原因补充:

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