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 相关文章推荐
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
js实现图片无缝滚动
Dec 23 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
使用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
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
jquery编写日期选择器
2017/03/16 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
flask项目集成swagger的方法
2020/12/09 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
LINUX下线程,GDI类的解释
2012/04/17 面试题
CNC数控操作工岗位职责
2013/11/19 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
文明风采获奖感言
2014/02/18 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
检讨书1000字
2014/10/11 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android