<div class="uploader">
<van-uploader v-model="fileList" accept="image/*" multiple :max-count="countMax" />
</div>
<div @click="submit">提交</div>
<script>
window.alert = function (name) {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
window.frames[0].window.alert(name);
iframe.parentNode.removeChild(iframe);
}
new Vue({
el: "#Vue",
data: {
countMax: 9,
fileList: [],
fileArr: []
},
created() {
document.documentElement.style.fontSize = 16 * document.documentElement.clientWidth / 375 + 'px'
},
methods: {
ajaximg(type, url, params, cb) {
$.ajax({
type: type,
url: url,
data: params,
dataType: "json",
async: true,
contentType: false,
processData: false,
success: (response) => {
cb(response)
}
});
},
submit() {
if (this.fileList.length < 2) {
vant.Toast("图片不能小于2张");
return false;
}
vant.Toast.loading({
message: "加载中...",
forbidClick: true,
duration: 0,
});
this.fileArr = [];
this.getPreview(this.fileList, 0);
},
getPreview(file, i) {
let fileUrl = file[i].file;
let formData = new FormData();
formData.append("file", fileUrl);
formData.append("key", "");
this.ajaximg('post','域名', formData, (res) => {
if (res.status == 200) {
this.fileArr.push(res.info.url);
if (i + 1 == this.fileList.length) {
this.setAdd();
}
if (++i < this.fileList.length) {
this.getPreview(file, i);
}
} else {
vant.Dialog.alert({
title: "温馨提示",
message: "图片上传失败,请重新上传",
}).then(() => { });
}
})
},
setAdd() {
console.log(this.fileArr)
vant.Toast("上传成功");
}
}
})
</script>