关于移动端H5使用xhr上传文件

关注

原创最新推荐文章于 2026-08-11 09:04:29 发布 905 阅读 AI 写同款· GEO 优化 ›

前端实现图片压缩上传功能以移动端为例，在H5上传图片时，由于机型 / 网速 / 流量等限制，在低版本机型上经常会出现上传的图片太大导致上传很慢甚至崩溃的情况，所以需要对在某些情况下需要对上传的图片进行压缩上传。以下以移动端使用Vue框架为例：（以下主要实现思路来自张鑫旭大神的博客：阅读详情

首先我是用的是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，所以传了一下午愣是没传过去，真是好气啊啊啊啊，也是因为我刚来公司，对大家的编码习惯都不清楚，哈哈，以后这些地方得注意多多熟悉了

收录于