vue 使用原生組件上傳圖片的實例
需求描述：需要將后臺返回的圖片路徑賦值到img的 src
1 一個頁面上傳一張圖片
當一個頁面只有一個位置需要上傳圖片，很簡單，直接綁定上傳按鈕
html頁面
<div class='col-md-4'> <input accept='image/png,image/jpg' type='file' v-on:change='uploadPic($event)' /> <input v-model='mapItem.MapIcon' /> <img v-bind:src='http://www.b3g6.com/bcjs/mapItem.MapIcon' /> </div>
js代碼：封裝上傳圖片的方法
uploadPic(e) { var _self = this; var inputFile = e.target; if (!inputFile.files || inputFile.files.length <= 0) { return; } var file = inputFile.files[0]; var formData = new FormData(); formData.append(’file’, file); formData.append(’SaveDir’, ’Map/MapItem’); formData.append('FileName', $.whiskey.tools.dateFormat(new Date(), 'HHmmssffff')); $.ajax({ url: '/Upload/UploadPic',//后臺上傳圖片的方法 type: ’POST’, dateType: ’json’, cache: false, data: formData, processData: false, contentType: false, success: function (res) { if (res.ResultType == 3) { var filePath = res.Data.file;//后臺返回的圖片路徑 _self.mapItem.MapIcon = filePath;//將路徑賦值到聲明的變量中 } } });},
2 一個頁面上傳多張圖片
當一個頁面有多個位置需要上傳圖片，如果按照上面方法，得需要綁定多個上傳函數，所以我把重復的部分封裝出來,用到了promise函數
html頁面
<div class='col-md-4'> <input accept='image/png,image/jpg' type='file' v-on:change='uploadPic($event)' /> <input v-model='mapItem.MapIcon' /> <img v-bind:src='http://www.b3g6.com/bcjs/mapItem.MapIcon' /> </div>
js代碼：封裝上傳圖片的方法
uploadPic(e) { var _self = this; var inputfile = e.target; _self.uploadImg(inputfile).then(data => { _self.mapItem.MapIcon = data;//data為取到的圖片路徑 })},//封裝函數 uploadImg(inputFile) { var _self = this; if (!inputFile.files || inputFile.files.length <= 0) { return; } return new Promise((suc,err)=>{ var file = inputFile.files[0]; var filepath = ''; var formData = new FormData(); formData.append(’file’, file); formData.append(’SaveDir’, ’Map/MapSite’); formData.append('FileName', $.whiskey.tools.dateFormat(new Date(), 'HHmmssffff')); $.ajax({ url: '/Upload/UploadPic', type: ’POST’, dateType: ’json’, cache: false, data: formData, processData: false, async:false, contentType: false, success: function (res) { if (res.ResultType == 3) { filepath = res.Data.file; suc(filepath); } } }); }) },},
補充知識：vue 利用原生input上傳圖片并預覽并刪除
看代碼~
<template> <div class='com-upload-img'> <div class='img_group'> <div v-if='allowAddImg' class='img_box'> <input type='file' accept='image/*' multiple='multiple' @change='changeImg($event)'> <div /> </div> <div v-for='(item,index) in imgArr' :key='index' class='img_box'> <div class='img_show_box'> <img :src='http://www.b3g6.com/bcjs/item' alt=''> <i @click='deleteImg(index)' /> <!-- <i @click='imgArr.splice(index,1)'></i> --> </div> </div> </div> </div></template>
js部分
<script>export default { name: ’ComUpLoad’, data() { return { imgData: ’’, imgArr: [], imgSrc: ’’, allowAddImg: true } }, methods: { changeImg: function(e) { var _this = this var imgLimit = 1024 var files = e.target.files var image = new Image() if (files.length > 0) { var dd = 0 var timer = setInterval(function() { if (files.item(dd).type !== ’image/png’ && files.item(dd).type !== ’image/jpeg’ && files.item(dd).type !== ’image/gif’) { return false } if (files.item(dd).size > imgLimit * 102400) { // to do sth } else { image.src = window.URL.createObjectURL(files.item(dd)) image.onload = function() { // 默認按比例壓縮 var w = image.width var h = image.height var scale = w / h w = 200 h = w / scale // 默認圖片質量為0.7，quality值越小，所繪制出的圖像越模糊 var quality = 0.7 // 生成canvas var canvas = document.createElement(’canvas’) var ctx = canvas.getContext(’2d’) // 創建屬性節點 var anw = document.createAttribute(’width’) anw.nodeValue = w var anh = document.createAttribute(’height’) anh.nodeValue = h canvas.setAttributeNode(anw) canvas.setAttributeNode(anh) ctx.drawImage(image, 0, 0, w, h) var ext = image.src.substring(image.src.lastIndexOf(’.’) + 1).toLowerCase()// 圖片格式 var base64 = canvas.toDataURL(’image/’ + ext, quality) // 回調函數返回base64的值 if (_this.imgArr.length <= 4) { _this.imgArr.unshift(’’) _this.imgArr.splice(0, 1, base64)// 替換數組數據的方法，此處不能使用：this.imgArr[index] = url; if (_this.imgArr.length >= 5) { _this.allowAddImg = false } } } } if (dd < files.length - 1) { dd++ } else { clearInterval(timer) } }, 1000) } }, deleteImg: function(index) { this.imgArr.splice(index, 1) if (this.imgArr.length < 5) { this.allowAddImg = true } } }}</script>
以上這篇vue 使用原生組件上傳圖片的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。
相關文章：
網公網安備