vue 使用原生组件上传图片的实例


Posted in Javascript onSeptember 08, 2020

需求描述:需要将后台返回的图片路径赋值到img的 src

1 一个页面上传一张图片

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

html页面

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

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

html页面

<div class="col-md-4">
  <input class="hidden" accept="image/png,image/jpg" type="file" id="tempUploadFile" v-on:change="uploadPic($event)" />
  <input class="hidden" v-model="mapItem.MapIcon" />
  <img class="imgbgbox" 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 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 class="filter" />
  </div>
  <div v-for="(item,index) in imgArr" :key="index" class="img_box">
  <div class="img_show_box">
   <img :src="item" alt="">
   <i class="img_delete" @click="deleteImg(index)" />
   <!-- <i class="img_delete" @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 使用原生组件上传图片的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
使用js和canvas实现时钟效果
Sep 08 #Javascript
javascript使用canvas实现饼状图效果
Sep 08 #Javascript
vue配置多代理服务接口地址操作
Sep 08 #Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 #Javascript
JS删除对象中某一属性案例详解
Sep 08 #Javascript
vue全局使用axios的操作
Sep 08 #Javascript
Vue自定义多选组件使用详解
Sep 08 #Javascript
You might like
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python中调试或排错的五种方法示例
2019/09/12 Python
计算机软件个人的自荐信范文
2013/12/01 职场文书
迎新晚会邀请函
2014/02/01 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
终止劳动合同协议书
2014/04/14 职场文书
我的中国梦口号
2014/06/16 职场文书
要账委托书范本
2014/09/15 职场文书
离职感谢信怎么写
2015/01/22 职场文书
个人自荐书怎么写
2015/03/26 职场文书
公司开除员工通知
2015/04/22 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP