vue项目中的 多图上传。涉及压缩
你可以在我的资源页面下载插件的压缩包：http://download.csdn.net/my 插件开发 new Vue({ el: "#app", methods: { onadd: f
你可以在我的资源页面下载插件的压缩包：http://download.csdn.net/my
<html>
<head>
<link rel="stylesheet" href="./Multi-upload.css">
<script src="./vue.min.js"></script>
<script src="./Multi-upload.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>插件开发</title>
</head>
<body>
<div id="app">
<uploader ref="upload" @add="onadd" max="3"></uploader>
</div>
</body>
<script>
new Vue({
el: "#app",
methods: {
onadd: function (db) {
var vm = this;
、、方法1，图片上传一张给后台一张
// console.log("上传base64", db.src); //上传图片单个的上传
、、方法2，要把上传的图片放在一个数组里然后再给后台 setTimeout(function () { //这是用setTimeout()来模拟ajax的访问
console.log("上传成功!");
db.ok = true;//ok
console.log('获取所有图片');
console.log(vm.$refs.upload.getimg());
}, 1000)
}
}
})
</script>
</html>
、、方法1，图片上传一张给后台一张
在下面访问ajax把你这个db.src给后台，然后在页面显示他给你的那个图片
this.$api("Callingcard/doevery",{img:db.src}).then(data=>{
db.src=data.src;//页面的src用后台传给你的，因为如果你直接在外面替换了，可能是他上传给后台失败了，其实是不能显示的呢?所以替换工作应该是在这里的。
});
、、方法2，要把上传的图片放在一个数组里然后再给后台
点击上传的时候：
onload(db){
this.$api("Callingcard/doevery",{img:db.src}).then(data=>{
db.src=data.src;
db.ok=true;
});
}
最后点击提交按钮的时候
通过ajax把vm.$refs.upload.getimg()传给后台
submit(){
this.$api("Callingcard/addAnliImg",{title:this.title,img:this.$refs.upload.getimg()}).then(db=>{
mui.back();
});
}
但是上面的没有压缩图片呢。所以你需要再用一个压缩插件lrz.all.bundle.js
你可以看我的另一篇博客http://blog.csdn.net/qq_33769914/article/details/56840928
需要修改的就是上面的
点击上传的时候：
onload(db){
var vm = this;
lrz(db.file, { width: 640 }).then(function (rst) {
db.src = db.src_x = rst.base64;
this.$api("Callingcard/doevery",{img:db.src}).then(data=>{
db.src=data.src;
db.ok=true;
db.onerr();
});
})
},
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献55条内容
所有评论(0)