首先是样式: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 } };
我采取的是一次性全部提交,也可以依照这个改造为一个个提交