基于VUE选择上传图片并页面显示（图片可删除）
程序员文章站
2022-06-14 13:43:06
基于vue选择上传图片并在页面显示，图片可删除，具体内容如下
demo例子：
依赖文件：
html文本内容：
&l...
基于vue选择上传图片并在页面显示，图片可删除，具体内容如下
demo例子：
依赖文件：
html文本内容：
<template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button" @click="change_input()">上传照片</button> <form id="addtextform" @change="setimg($event)"> </form> </div> <div id="img-wrapper" @click="deleteimg($event)"></div> <p class="btn-wrapper"> <mt-button type="primary" @click="submit()">提交</mt-button> </p> </div> </template>
js文本内容：
<script>
/**
* 从 file 域获取 本地图片 url
*/
function getfileurl(obj) {
let url;
url = window.url.createobjecturl(obj.files.item(0));
return url;
}
export default {
name: 'accident',
// 定义数据
data () {
return {
imgnum:4, //上传的照片数量，可根据实际情况自定义
}
},//定义事件
methods:{
//根据点击上传按钮触发input
change_input(){
let inputarr=$('#addtextform input');
let add_inputid=''; //需要被触发的input
for(let i=0;i<inputarr.length;i++){
// 根据input的value值判断是否已经选择文件
if(!inputarr[i].value){ //如果没有选择,获得这个input的id
add_inputid=inputarr[i].id;
break;
}
}
if(add_inputid){ //如果需要被触发的input id存在,将对应的input触发
return $("#"+add_inputid).click();
}else{
alert("最多选择"+this.imgnum+"张图片")
}
},
//当input选择了图片的时候触发,将获得的src赋值到相对应的img
setimg(e){
let target=e.target;
$('#img_'+target.id).attr('src',getfileurl(e.srcelement));
},
//点击图片删除该图片并清除相对的input
deleteimg(e){
let target=e.target;
let inputid=''; //需要清除value的input
if(target.nodename=='img'){
target.src='';
inputid=target.id.replace('img_',''); //获得需要清除value的input
$('input#'+inputid).val("");
}
},
//提交信息到后台
submit(){
$("#addtextform").ajaxsubmit({
url: this.$root.api+"/index/staff_accident/add",
type: "post",
data: {
'total_price':this.price,
'descript':this.descript,
},
success: (data) => {
if(data.code==0){
console.log(‘提交成功');
}else{
alert('提交失败');
}
}
});
}
},
//页面加载后执行
mounted(){
for(let i=0;i<this.imgnum;i++){
//生成input框，默认为1
let my_input = $('<input type="file" name="image" />'); //创建一个input
my_input.attr('id',i); //为创建的input添加id
$('#addtextform').append(my_input); //将生成的input追加到指定的form
//生成img，默认为1
let my_img = $('<img src="">');
my_img.attr('id', 'img_'+i);
my_img.css({"max-width":"50%","max-height":"200px"});
//添加样式，由于vue的执行机制，页面加载的时候img标签还没有生成，直接写在style样式会不生效
$('#img-wrapper').append(my_img);
}
},
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： RecyclerView添加监听功能