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