vue+weui+FormData+XMLHttpRequest 實現圖片上傳功能

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

在weui示例中可以看到是用以下方法進行選擇圖片

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

　　

我採取的是一次性全部提交，也可以依照這個改造爲一個個提交