关于移动端H5使用xhr上传文件
cirzear / / 杂谈 / 阅读量 568

首先我是用的是uniapp框架,所以以下内容皆以此未前提 我是第一次用uniapp,所以有些地方也不太熟悉,比如在写h5时,页面上的input的type写成file时页面上没有效果, 查看官方文档后知道,需要使用js 插入一个input标签,并用一个点击事件触发它的点击事件,话不多说,上代码

            // 上传文件
            add_file() {
                var input = document.createElement('input')
                input.type = 'file'
                input.style.display = 'none'
                input.id = 'file'
                this.$refs.inputlw.$el.appendChild(input);
                input.onchange = (event) => {
                    this.fileinfo = event.target.files[0]  //这是我用来存储文件信息的,可删
                    this.upload(event)
                }
            },

这是初始化页面的时候调用的方法

下面是点击事件

            click() {
                return document.getElementById("file").click();
            },

这就触发了这个input的点击事件,之后如果你上传文件就进入这个input的onchange事件中

之后下一步就是调用核心上传方法

            // 上传核心方法
            upload(event){
                let _file = event.target.files[0];
                let formData = new FormData();
                // HTML 文件类型input,由用户选择
                formData.append("file", _file);  //这里的file只是后台接收时的名字,可自行与后台沟通
                let xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
                xhr.open("post", "这里是你的上传地址", true);
                 //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
                //请求完成
                xhr.onload = (res) => {
                    //这里就是上传完成后的事件,我这里将响应值转为json格式方便取值
                    this.form.url = JSON.parse(res.target.response).url;
                };
                //上传开始执行方法
                xhr.upload.onloadstart = () => { 
                    this.$.show('上传中...');
                };
                xhr.upload.onprogress = (res) => {
                    if(res.loaded / res.total == 1){
                        setTimeout(()=>{
                            this.$.hide()
                        },5000)
                    }
                    // res.total是需要传输的总字节,res.loaded是已经传输的字节。
                    // 如果res.lengthComputable不为真,则res.total等于0
                };
                //请求失败
                xhr.onerror = (data) => {
                    this.$.hide()
                    this.$.ti_shi('上传失败')
                };
                xhr.ontimeout = function(event) {
                    this.$.hide()
                    this.$.ti_shi('上传超时,请刷新重试')
                }
                xhr.send(formData);
            },

上面代码中的show,hide ,tishi 这些方法都是自己本地封装的方法,方便调用而已,大家可以换成自己的方法

我在这个问题上遇到的坑就是在向后台传文件时,因为名字写为了 file,但是后台那边不管什么文件,取值时一律用的img,所以传了一下午愣是没传过去,真是好气啊啊啊啊,也是因为我刚来公司,对大家的编码习惯都不清楚,哈哈,以后这些地方得注意多多熟悉了

支付宝捐赠
请使用支付宝扫一扫进行捐赠
微信捐赠
请使用微信扫一扫进行赞赏
有 0 篇文章