vue 图片上传图片展示 bootstrap

全栈程序员-站长 • 2022年6月22日下午11:36 • 未分类 • 阅读 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

【Java】Java四舍五入保留1位小数、2位小数…

【Java】Java四舍五入保留1位小数、2位小数…Java四舍五入保留1位小数的方法：importjava.math.BigDecimal;publicclassTest{publicstaticvoidmain(String[]args){doubled1=3.02;System.out.println(d1);//利用字符串格式化的方式实现四舍五入…

全栈程序员-站长
2022年5月11日
33
javascript实现一个自制网页音乐播放器

javascript实现一个自制网页音乐播放器序接触简书也有一段日子了，这中间的时光还是比较轻松加愉快的，那种可以和他人分享知识的欣喜和愉悦的确是非常棒。我一向都是觉得专心写自己的文就可以了，不会总是纠结有多少人在看，有多少点击等等。用心写好自己的文，体会那种分享的快乐，就可以了。之前写的《js常用方法和一些封装》系列暂且告一段落，接下来，我会通过各种案例，来分享javascript的各种技巧，所以最终将这个系列的名称定为：《从案例中学习

全栈程序员-站长
2022年6月18日
27
python 网络编程

python 网络编程

全栈程序员-站长
2021年7月8日
82
C语言之学生管理系统代码（完整）「建议收藏」

C语言之学生管理系统代码（完整）「建议收藏」<spanstyle=”font-size:18px;”>#include<stdio.h>#include<stdlib.h>#defineFILENAME”student.dat”typedefenum{MAN,WOMAN}SEX;typedefstructtagStudent{ intnum; //学生…

全栈程序员-站长
2022年7月26日
4
php取得json_decode中的值,php json decode-获取值[通俗易懂]

php取得json_decode中的值,php json decode-获取值[通俗易懂]正如Danp已经说过的,返回的JSON包含在函数调用中(由jsoncallback=json)你不能完全摆脱这个,但是,只是用AreaSearch?jsoncallback=&lat=41.1131514&lng=-74.0437521至少删除json在字符串的开头,您可以通过以下方式除去括号:$json=trim(trim($json),”();”);给予:{items:[…

全栈程序员-站长
2022年7月17日
29
java json decode 中文_PHP实现json_decode不转义中文的方法[通俗易懂]

java json decode 中文_PHP实现json_decode不转义中文的方法[通俗易懂]本文实例讲述了PHP实现json_decode不转义中文的方法。分享给大家供大家参考，具体如下：默认情况下PHP的json_decode方法会把特殊字符进行转义，还会把中文转为Unicode编码形式。这使得数据库查看文本变得很麻烦。所以我们需要限制对于中文的转义。对于PHP5.4+版本，json_decode函数第二个参数，可以用来限制转义范围。要限制中文，使用JSON_UNESCAPED_U…

全栈程序员-站长
2022年7月17日
15

发表回复

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

昵称：

邮箱：

网址：

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