VUE如何实现选择上传图片并页面显示功能

这篇文章给大家分享的是有关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>  /**   * 从 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>

感谢各位的阅读！关于“VUE如何实现选择上传图片并页面显示功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！