vue 图片上传图片展示 bootstrap

全栈程序员-站长 • 2022年6月22日下午11:36 • 未分类 • 阅读 37

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

光棍节程序员闯关秀过关全攻略（附带小工具）[通俗易懂]

光棍节程序员闯关秀过关全攻略（附带小工具）[通俗易懂]光棍节程序员闯关秀过关全攻略。程序员的寂寞谁能懂?"SF光棍节程序员闯关秀"智力挑战小游戏火热上线，看看你能闯到第几关？游戏地址:http://segmentfault.com

全栈程序员-站长
2022年7月1日
39
2020年软件测试前景_转行学软件测试的下场

2020年软件测试前景_转行学软件测试的下场作为一名软件测试工程师，汇智妹可以负责任地告诉你：自信点，把“吗”去掉！为什么？本篇文章将从以下三个维度来为你解读：1.关于软件测试软件测试属新兴职业，且随着目前国内软件产业规模越来越大，软件行业也早已突破传统的作坊式生产，从单打独斗的开发模式升级为工业化、流水线式的生产模式，从而导致专业的软件测试人才需求缺口巨大。作为工业化产品质量的“把门”者，软件测试工程师已成为软件开发企业必不可少的技术人才。目前国内软件测试和开发人员比例大约在1：4~1：5，而国外测试和开发人员比例为1：1，由此

全栈程序员-站长
2022年9月11日
1
【软考】系统集成项目管理工程师（一）信息化知识[通俗易懂]

【软考】系统集成项目管理工程师（一）信息化知识[通俗易懂]软考中级——系统集成项目管理工程师备考干货第一章：信息化知识。

全栈程序员-站长
2022年8月31日
0
UltraISO软碟通安装与刻盘以及安装镜像[通俗易懂]

UltraISO软碟通安装与刻盘以及安装镜像[通俗易懂]教程整合三个出处1.准备一个8G以上的U盘，USB2.0以上就可以。然后安装UltraISO，右击程序，以管理员身份运行：2.软件下载地址http://ct.ghpym.com/dir/7369060-41274910-101449本次提供的版本无需注册码，如果提示输入，可以使用下面的注册码输入任意激活码即可用户名：果核剥壳注册码：2042ED05F7B36E0D用户名：ghpym激活码：447D3A36B62292E33.点击文件-打开，找到下载的恢复镜像…

全栈程序员-站长
2022年7月26日
7
跳转网站_redirect

跳转网站_redirectCreatedbyJerryWangonJun07,2014在browser里输入httpurl之后，敲回车之后http自动转换成https:通过httpwatch观察到有一个307redirect:通过tcodeSMICM查看ICMserver设置:发现server设置为所有http的request都会自动redirect成https,portnum…

全栈程序员-站长
2025年6月13日
0
架设ftp服务器从入门到精通[通俗易懂]

架设ftp服务器从入门到精通[通俗易懂]1.FTP是什么FTP的全称是FileTransferProtocol(文件传输协议)。顾名思义，就是专门用来传输文件的协议。FTP服务器则是在互联网上提供存储空间的计算机，它们依照FTP协议提供服务。当它们运行时，用户就可以连接到服务器上下载文件，也可以将自己的文件上传到FTP服务器中。有时把FTP服务器简称为FTP。FTP服务器的存在，大大方便了网友之间远程交换文件资料的需要，充分体现了互联网资源共享的精神。现在许多朋友都已经用上了宽带网，而且硬盘也有足够的空间，完全可以通过软件手段把自己的

全栈程序员-站长
2022年7月21日
19

发表回复

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

昵称：

邮箱：

网址：

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