vue實現圖片上傳到後臺
阿新 • • 發佈:2020-07-01
本文例項為大家分享了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.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="vue實現圖片上傳到後臺"> <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元件學習教程進行學習。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。