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='https://www.haobala.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='https://www.haobala.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='https://www.haobala.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 使用原生组件上传图片的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。