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

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