需求描述：需要將后臺(tái)返回的圖片路徑賦值到img的 src

1 一個(gè)頁面上傳一張圖片

當(dāng)一個(gè)頁面只有一個(gè)位置需要上傳圖片，很簡單，直接綁定上傳按鈕

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.gepszalag.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',//后臺(tái)上傳圖片的方法 type: ’POST’, dateType: ’json’, cache: false, data: formData, processData: false, contentType: false, success: function (res) { if (res.ResultType == 3) { var filePath = res.Data.file;//后臺(tái)返回的圖片路徑 _self.mapItem.MapIcon = filePath;//將路徑賦值到聲明的變量中 } } });},

2 一個(gè)頁面上傳多張圖片

當(dāng)一個(gè)頁面有多個(gè)位置需要上傳圖片，如果按照上面方法，得需要綁定多個(gè)上傳函數(shù)，所以我把重復(fù)的部分封裝出來,用到了promise函數(shù)

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.gepszalag.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為取到的圖片路徑 })},//封裝函數(shù) 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); } } }); }) },},

補(bǔ)充知識(shí)：vue 利用原生input上傳圖片并預(yù)覽并刪除

看代碼~

<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.gepszalag.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() { // 默認(rèn)按比例壓縮 var w = image.width var h = image.height var scale = w / h w = 200 h = w / scale // 默認(rèn)圖片質(zhì)量為0.7，quality值越小，所繪制出的圖像越模糊 var quality = 0.7 // 生成canvas var canvas = document.createElement(’canvas’) var ctx = canvas.getContext(’2d’) // 創(chuàng)建屬性節(jié)點(diǎn) 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) // 回調(diào)函數(shù)返回base64的值 if (_this.imgArr.length <= 4) { _this.imgArr.unshift(’’) _this.imgArr.splice(0, 1, base64)// 替換數(shù)組數(shù)據(jù)的方法，此處不能使用：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 使用原生組件上傳圖片的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。