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

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

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

1	`<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,所以改造一下子

1	`<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;
                } <br>　　　　　　　　　　self.imgs.push({ url: "background-image: url(" + src + ")"});//这个src为一种。。啥类型来着，自个F12瞅瞅
                //添加到数组
                filesAry.push({
                    file: file
                })
            };
        }

最后是展示

1	`<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
        }
    };