基于VUE选择上传图片并在页面显示(图片可删除)

基于VUE选择上传图片并在页面显示(图片可删除)

demo例子:

基于VUE选择上传图片并在页面显示(图片可删除)

 

依赖文件 :

 

http://files.cnblogs.com/files/zhengweijie/jquery.form.rar

 

 

 

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(‘提交成功’);
$("#addTextForm input").val('');

                                 $(‘div#img-wrapper img’).attr(‘src’,”);

                           }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>
复制代码

 

 
 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/113773.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • eclipse中Git的使用

    eclipse中Git的使用eclipse中Git的使用

  • Access denied for user ‘root‘@‘localhost‘问题的解决「建议收藏」

    Access denied for user ‘root‘@‘localhost‘问题的解决「建议收藏」问题场景在阿里云上部署了一台服务器,CentOS6.8系统环境,安装了MySql+Nginx+Git+vsftpd等软件,在本地Linux终端以非root账户SSH远程登录服务器,在将项目打包发布时遇到如题所示问题。代码中配置文件里的用户名不是“root”,密码正确,且该用户名和密码是配置在服务端数据库的用户表中的。但是在用浏览器调用跟数据库交互接口时出错:尝试解决网上搜了一堆文章,主要集中在(1…

    2022年10月28日
  • 磁盘未初始化 修复_初始化磁盘是什么意思

    磁盘未初始化 修复_初始化磁盘是什么意思磁盘没有初始化是因为0号扇区损坏,导致机械硬盘分区表读取不出来,从而机械硬盘出现磁盘没有初始化。工具/软件:极限数据恢复软件步骤1:程序打开后,直接双击需要恢复数据的物理盘。步骤2:等待程序扫描完毕大概需要几分钟到半个小时,稍微耐心等下即可。步骤3:软件扫描到资料后,软件会将扫描到的分区列出来。步骤4:勾上所有需要恢复的资料,右击选择《复制勾选的文件》,…

  • python中的encode()和decode()函数

    python中的encode()和decode()函数对于很多人来说,python的中字符转码是一件很头疼的事情,本来期望结果输出的是中文,结果来一段像这样\xe4\xbd\xa0\xe5\xa5\xbd像是乱码的字符串。由于学python没多久,昨天使用python的时候,就遇到这种问题,现在来深入研究下与之相关的encode()和decode()函数,和如何把如乱码般的字符串转成中文。encode()和decode()都是字符串的函数,可直接查看关

  • 如何安装GCC

    如何安装GCC现在的CentOs8上没有自带的gcc编译器因此需要下载(注意:这里的下载是指在虚拟机中下载,不是指在电脑上下载)若运行gcc时出现appstream下载元数据失败则表明没有安装gcc。1首先需要获得root权限****在终端模式下输入su,按下回车输入密码即可(注意这里的输入密码无显示)2检查虚拟机是否联网(当然要先确保电脑已联网)3检查网络是否正常输入pingwww….

  • jwttoken失效机制_token怎么获取

    jwttoken失效机制_token怎么获取

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号