作者:蓝俊明伟伦淑舜 | 来源:互联网 | 2023-09-09 10:42
首先是样式:https:weui.io#uploader在weui示例中可以看到是用以下方法进行选择图片<inputmultiple>$uploaderInput$("#uploaderInput");$uploaderInput.on("change&
首先是样式:https://weui.io/#uploader
在weui示例中可以看到是用以下方法进行选择图片
$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
由于俺们用的vue,所以改造一下子
在相关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 self.imgs.push({ url: "background-image: url(" + src + ")"});//这个src为一种。。啥类型来着,自个F12瞅瞅
//添加到数组
filesAry.push({
file: file
})
};
}
最后是展示
然后捏,就可以在此基础上做任何扩展操作啦,例如限制图片类型,数量鸭
最后是提交图片,先全添加进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
}
};
我采取的是一次性全部提交,也可以依照这个改造为一个个提交