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

  

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

 

posted @ 2019-04-09 10:04  君宁天下  阅读(...)  评论(...编辑  收藏
野生程序员真的是太难了,一刻也不敢停止学习