vue实现图片上传到后台


Posted in Javascript onJune 29, 2020

本文实例为大家分享了vue实现图片上传到后台的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="jquery-1.11.3.min.js"></script>
 <style>
  .upload {
  margin: 30px 40px 0;
  width: 122px;
  height: 122px;
  padding-bottom: 40px;
  position: relative;
  float: left;
  }
  .upload .btn {
  position: absolute;
  left: 20px;
  bottom: 0;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #Fff;
  border-radius: 5px;
  background: #ff6c00;
  }
  .upload .btn .file {
  display: inline-block;
  position: absolute;
  width: 80px;
  height: 30px;
  left: 0;
  top: 0;
  opacity: 0;
  }
  .upload .btn .add{
   position: absolute;
   left: 0;
   top: 0;
   width: 80px;
   height: 30px;
   text-align: center;
  }
  .upload .imgs {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  padding: 10px;
  }
  .upload .imgs img {
  width: 100px;
  height: 100px;
  border: 1px solid #f1f1f1;
  }
  .upload .imgs .look {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  }
 </style>
</head>
<body>
 <!-- 模态框 -->
 <div class="madel-img"></div>
 
 <div class="upload_wrap clearfix">
  <div class="upload upload1 fl">
   <div class="btn">
   <span class="add">上传文件</span>
   <input type="file" class="file" multiple>
   <input type="hidden" class="imgUrl">
   </div>
   <div class="imgs">
   <img src="shenfenzheng.jpg" alt="">
   <div class="look">图片示范</div>
   </div>
  </div>
 </div>
 
 <script>
 ;(function($){
 
  /* 上传图片 */
  $.fn.upload = function(id){
   this.id = id;
   this.img = this.id.find($(".imgs img"));
   this.img_src = this.id.find($(".imgs img")).attr("src");
   this.file = this.id.find($(".file"));
   this.look = this.id.find($(".look"));
   this.imgUrl = this.id.find($(".imgUrl"));
   var that = this;
 
   this.file.on("change",function(){
 
   var files = this.files;//获得上传的所有图片
   var reader = new FileReader();//读取本地图片并显示
 
   var name = files[0].name;
    var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
    if(fileName !="jpg" && fileName !="jpeg" && fileName !="png" && fileName !="bmp"){
     layer.msg("图片格式不正确!");
     that.img.attr("src",that.img_src)
     return;
    }
    var fileSize = files[0].size;
    var size = fileSize / 1024;
    if(size>10000){
     layer.msg("图片不能大于10M");
     return;
    }else if(size <= 0){
     layer.msg("图片不能小于0M");
     return;
    }
 
   reader.readAsDataURL(files[0]);//读取第一张图片的地址
   //数据读取完成后改变src地址
   reader.onload = function(){
    that.look.css({"display":"none"});
    var image = new Image();//本地缓存一张图片
    var imgCur_src = this.result;//获取正在上传的图片
    that.img.attr("src",imgCur_src);//吧刚开始的图片替换成上传的图片
   }
 
    var fd = new FormData();
    fd.append("pic", files[0]);
    $.ajax({
     type: "POST",
     contentType: false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
     processData: false, //必须false才会自动加上正确的Content-Type
     url: uploadUrl,
     data: fd,
     async: false,
     beforeSend: function (request) {
      request.setRequestHeader("Authorization", localStorage.token);
      request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
     },
     success: function (msg) {
      console.log(msg)
      if (msg.code == "100") {
       imgUrl.val(msg.data);
      }
     },
     error: function (msg) {
      console.log(msg);
     }
    });
   })
  }
 
  $(".upload1").upload($(".upload1"));
 })(jQuery)
</script>
</body>
</html>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
vue写一个组件
Apr 09 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
JS判断数组四种实现方法详解
Jun 29 #Javascript
vue实现整屏滚动切换
Jun 29 #Javascript
vue实现页面切换滑动效果
Jun 29 #Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 #Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 #Javascript
vue实现列表滚动的过渡动画
Jun 29 #Javascript
element跨分页操作选择详解
Jun 29 #Javascript
You might like
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
Django视图、传参和forms验证操作
2020/07/15 Python
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
最新大学生自我评价
2013/09/24 职场文书
七年级历史教学反思
2014/02/05 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
2015年度物流工作总结
2015/04/30 职场文书
国际贸易实训总结
2015/08/03 职场文书
感恩教育主题班会
2015/08/12 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL