vue+weui+FormData+XMLHttpRequest 实现图片上传功能

佚名 7年前 (2019-04-09) 随笔 1681人围观抢沙发百度已收录

首先是样式：https://weui.io/#uploader

在weui示例中可以看到是用以下方法进行选择图片

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>

 $uploaderInput = $("#uploaderInput")；
 $uploaderInput.on("change", function(e){
            var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];

                if (url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }

                $uploaderFiles.append($(tmpl.replace('#url#', src)));
            }
        });

　由于俺们用的vue,所以改造一下子

<input @change="uploadInpuChange($event)" class="weui-uploader__input" type="file" accept="image/*" multiple=""/>

　在相关vue实例中加入如下方法

uploadInpuChange: function (e) {
            let src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files, self = this;
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                if (url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                } 
　　　　　　　　　　self.imgs.push({ url: "background-image: url(" + src + ")"});//这个src为一种。。啥类型来着，自个F12瞅瞅
                //添加到数组
                filesAry.push({
                    file: file
                })
            };
        }

最后是展示

<li  v-for="img in imgs" class="weui-uploader__file a-fadein" v-bind:style="img.url"></li>

　然后捏,就可以在此基础上做任何扩展操作啦,例如限制图片类型，数量鸭

最后是提交图片,先全添加进formdata中

 let formdata = new FormData();
    filesAry.forEach(function (obj) {
        if (obj.file != null) {
            formdata.append('files', obj.file);//原项目一般回附带其他参数类型然后遍历做相关判断再添加
        }
    })

然后使用XMLHttpRequest对象进行提交

let xhr = new XMLHttpRequest();
    xhr.open('POST', location.href, true);
    xhr.send(formdata);
    xhr.onload = function (event) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            console.log(xhr.responseText);
         //okay
        }
        else {
        //no okay
        }
    };

我采取的是一次性全部提交，也可以依照这个改造为一个个提交