基于VUE选择上传图片并在页面显示，图片可删除，具体内容如下

demo例子：

依赖文件：

HTML文本内容：

相关照片

JS文本内容：

/**

* 从 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

// 根据input的value值判断是否已经选择文件

if(!inputArr[i].value){ //如果没有选择,获得这个input的ID

add_inputId=inputArr[i].id;

break;

}

}

if(add_inputId){ //如果需要被触发的input ID存在,将对应的input触发

return $("#"+addinputId).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

//生成input框，默认为1

let my_input = $(''); //创建一个input

my_input.attr('id',i); //为创建的input添加id

$('#addTextForm').append(my_input); //将生成的input追加到指定的form

//生成img，默认为1

let my_img = $('');

myimg.attr('id','img'+i);

my_img.css({"max-width":"50%","max-height":"200px"});

//添加样式，由于vue的执行机制，页面加载的时候img标签还没有生成，直接写在style样式会不生效

$('#img-wrapper').append(my_img);

}

},}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。