利用vant上传图片功能(可多选)
程序员文章站
2022-07-10 21:49:48
上传图片
<div class="upimg">
<span>上传图片</span>
<van-uploader v-model="fileList" @delete="deleteimg" :after-read="afterRead" multiple
:max-count="9" />
</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: {
fileList: [],
imglist: []
},
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)
}
});
},
afterRead(file) {
// 此时可以自行将文件上传至服务器
this.loadshow = true
if (file.length > 1) {
//使用for循环来适配多选情况
for (let i in file) {
this.upimg(file[i])
}
} else {
this.upimg(file)
}
},
//上传图片到服务器
upimg(e) {
var formData = new FormData();
formData.append("file", e.file);
formData.append("key", "Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO");
formData.append("is_https", 1);
this.ajaximg('post', 'https://ydnshop.hepulanerp.com/train/public/index.php/post/post/uploadFile', formData, (res) => {
let arry = this.imglist.concat(res.info.url) //前提是livehose是数组
this.imglist = arry
this.loadshow = false
})
},
//删除图片
deleteimg(file, detail) {
this.imglist.splice(detail.index - 1, 1);
console.log(this.imglist)
},
}
})
</script>
本文地址:https://blog.csdn.net/hy3528/article/details/107311077
上一篇: vue实现简单的购物车算账系统
推荐阅读
-
JavaSctit 利用FileReader和滤镜上传图片预览功能
-
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
-
移动端利用H5实现压缩图片上传功能
-
利用vant上传图片功能(可多选)
-
vue中利用simplemde实现markdown编辑器(增加图片上传功能)-个人文章-SegmentFault思否
-
基于Spring Boot利用 ajax实现上传图片功能
-
input file实现多选,限制文件上传类型,图片上传前预览功能
-
JS中利用FileReader实现上传图片前本地预览功能
-
如何利用PHP实现上传图片功能详解
-
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能