1. 全栈程序员必看首页

vue 图片上传 图片展示 bootstrap

全栈程序员-站长 • • 未分类 • 阅读 39

vue 图片上传 图片展示 bootstrap效果图html…………<--key=idPicUrl-->

大家好，又见面了，我是你们的朋友全栈君。

效果图
这里写图片描述

html

.....
.......
<-- key=idPicUrl -->
 <div class="col-sm-7" >  
        <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key" />
</div>

 <form id="fileForm" enctype="multipart/form-data" class="form-horizontal " >
    <div class="col-sm-5 " style="margin:0 25%;padding: 0">
         <input class="form-control" type="file"  name="file" @change="handleFileChange" ref="inputer" >
        </div>
</form>

vue

 data: {
     queryFirmInfo：{
     idPicUrl：""
     ......
    }

 }
 //选择改变图片
          handleFileChange(e){
              var vm=this;
              let file = e.target.files[0];
              let supportedTypes = ['image/jpg', 'image/jpeg', 'image/png'];
              if (file && supportedTypes.indexOf(file.type) >= 0) {
                  baseFileAjax(new FormData($( "#fileForm" )[0]),function(result){ 
   
                      if(result.ret==0){
                      //提交成功后
                      //将图片上传到后台，得到后台图片的路径。
                          vm.queryFirmInfo["idPicUrl"]=result.url;
                          $("#dForm").formValidation('revalidateField', "idPicUrl");
                      }else{
                          layer.msg("修改图片失败！")
                      }

                  })
              } else {
                  layer.alert('文件格式只支持：jpg、jpeg 和 png');
              }
          },
/** * @method :form表单提交文件 * @param url ：请求路径 * @param data ：请求数据(new FormData($( "#imgForm" )[0])) * @param method：回调方法 */
function baseFileAjax(data,method){
    $.ajax({
        url: '/dspark-firm/firmMember/uploadFile.yt' ,
        type: 'POST',
        data: data,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: method,
        error: function (returndata) {
            alert("Connection error");
        }
    });
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/150527.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • Python脚本到Windows可执行程序——Cxfreeze的安装与使用

    Python脚本到Windows可执行程序——Cxfreeze的安装与使用

    Python脚本到Windows可执行程序——Cxfreeze的安装与使用Python脚本到Windows可执行程序——Cxfreeze的安装与使用下载安装打包程序通过命令行简单使用使用setup.py详细配置Python脚本到Windows可执行程序——Cxfreeze的安装与使用写好的Python程序，分发到Windows用户的时候，如果再在每一台电脑上配置执行Python程序的解释器和相应的依赖库，就会比较繁琐。所以可以将Python程序打包程可执行的.exe文件。可以用的库有：cx_freeze，py2exe，P.

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月20日
    2
  • Laravel 5.2+ 使用url()全局函数返回前一个页面的地址

    Laravel 5.2+ 使用url()全局函数返回前一个页面的地址

    Laravel 5.2+ 使用url()全局函数返回前一个页面的地址

    全栈程序员-站长的头像 全栈程序员-站长
    2021年11月9日
    43
  • fedora14虚拟机安装教程_vmware上安装ubuntu

    fedora14虚拟机安装教程_vmware上安装ubuntu

    fedora14虚拟机安装教程_vmware上安装ubuntuSunVirtualBox虚拟机下安装Fedora12Linux软件准备：硬件：32bitCPU本地系统：WinXPSP2虚拟机版本：SunVirtualBox 3.1.4Fedora12：i386安装包操作步骤：1、安装虚拟机SunVirtualBox 3.1.4略 2、设置虚拟电脑>新建虚拟电脑，名称随意，选择操作系统Linux，选择版

    全栈程序员-站长的头像 全栈程序员-站长
    2025年11月25日
    3
  • [EE261学习笔记] 4.常用的几个傅里叶变换相关公式

    [EE261学习笔记] 4.常用的几个傅里叶变换相关公式

    [EE261学习笔记] 4.常用的几个傅里叶变换相关公式在本文开始前，需要说明一点，以下推导出的各项公式，只是为了实际计算中方便，并不都有其对应的物理意义。首先，我们写出符号f−(t)=f(−t)f−(t)=f(−t)f^-(t)=f(-t)，显然，对于奇函数而言，f−=−ff−=−ff^-=-f；对于偶函数而言，f−=ff−=ff^-=f。根据前文傅里叶变换推导，我们知道…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月17日
    13
  • python一行实现局域网内传输文件[通俗易懂]

    python一行实现局域网内传输文件[通俗易懂]

    python一行实现局域网内传输文件[通俗易懂]python一行实现局域网内传输文件熟悉python的大家伙，对于这个应该不陌生，这个功能我一直都在使用，今天想记录一下其实时想抛砖引玉。缘由记得那是刚开始学习python，对任何精简而强大的功能都感到好奇。从任何平台，只要看到关于python的文章，就会点进去进行深度阅读。久而久之，的确学习到了一些小技巧，或言之投机取巧吧。比如，这个用python来实现局域网内文件传输，就是在用了坚果pr…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月4日
    33
  • 2021年汽车修理工（初级）报名考试及汽车修理工（初级）最新解析「建议收藏」

    2021年汽车修理工（初级）报名考试及汽车修理工（初级）最新解析「建议收藏」

    2021年汽车修理工（初级）报名考试及汽车修理工（初级）最新解析「建议收藏」题库来源：安全生产模拟考试一点通公众号小程序安全生产模拟考试一点通：美容师（技师）试题及解析参考答案及美容师（技师）考试试题解析是安全生产模拟考试一点通题库老师及美容师（技师）操作证已考过的学员汇总，相对有效帮助美容师（技师）复审考试学员题库来源：安全生产模拟考试一点通公众号小程序安全生产模拟考试一点通：质量员-市政方向-通用基础(质量员)考试题是安全生产模拟考试一点通总题库中生成的一套质量员-市政方向-通用基础(质量员)免费试题，安全生产模拟考试一点通上质量员-市政方向-通用基础(质量员)作业手机同步

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月2日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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