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组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
vue实现图片上传到后台
- Author -
岳小哥声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@