这篇文章给大家分享的是有关VUE如何实现选择上传图片并页面显示功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
基于VUE选择上传图片并在页面显示，图片可删除，具体内容如下
demo例子：
依赖文件：jqueryform
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>
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>感谢各位的阅读！关于“VUE如何实现选择上传图片并页面显示功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
