小程序如何效果好_vue 使用原生组件上传图片的实

vue 使用原生组件上传图片的实例       这篇文章主要介绍了vue 使用原生组件上传图片的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

1 一个页面上传一张图片

当一个页面只有一个位置需要上传图片,很简单,直接绑定上传按钮

html页面

 div 
 input accept="image/png,image/jpg" type="file" id="tempUploadFile" v-on:change="uploadPic($event)" / 
 input v-model="mapItem.MapIcon" / 
 img v-bind:src="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 一个页面上传多张图片

当一个页面有多个位置需要上传图片,如果按照上面方法,得需要绑定多个上传函数,所以我把重复的部分封装出来,用到了函数

html页面

 div 
 input accept="image/png,image/jpg" type="file" id="tempUploadFile" v-on:change="uploadPic($event)" / 
 input v-model="mapItem.MapIcon" / 
 img v-bind:src="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 
 div 
 div v-if="allowAddImg" 
 input type="file" accept="image/*" multiple="multiple" @change="changeImg($event)" 
 div / 
 /div 
 div v-for="(item,index) in imgArr" :key="index" 
 div 
 img :src="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 使用原生组件上传图片的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。




扫描二维码分享到微信