<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>
<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 利用原声input上传图片并预览并删除的更多相关文章

  1. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  2. input上传图片并预览

    首先说一下input 大家都知道上传文件,图片是通过input 的file进行上传的. 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file&q ...

  3. input上传图片 显示预览信息

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决

    html代码: <img id="pic" src="img/pic.png"/> </span><input id=" ...

  5. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

  6. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  7. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  8. 利用 ICEpdf 快速实现 pdf 文件预览功能

    之前工作中,需要实现一个在线预览pdf的功能,一开始用的的 jQuery-media 插件来实现的,后来感觉有点慢,就继续寻找更好的替代品,直到遇见了 ICE pdf... ICEpdf (官网:ht ...

  9. 【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片,并且以九宫格展示图片

    大家好,我叫小秃僧 这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能 @ 目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...

随机推荐

  1. Allegro16.6 PCB 导入DXF 外框后曲线不闭合

    Allegro16.6 PCB 导入DXF  外框后曲线不闭合,边框不封闭导致的z-copy无法用的问题.解决办法: 菜单栏依次选择 shape--compose shape,options选择好ou ...

  2. Java 高级框架——Mybatis(一)

    一, SQl复习 a,数据库SQL命令 创建数据库并指定编码 Create database 数据库名 default character set utf8 create database ssm d ...

  3. 转载---JQuery 对 Select option 的操作

    下拉框: <select id="selectID" >         <option value="1">1</option& ...

  4. 【HDFS API编程】查看目标文件夹下的所有文件、递归查看目标文件夹下的所有文件

    使用hadoop命令:hadoop fs -ls /hdfsapi/test  我们能够查看HDFS文件系统/hdfsapi/test目录下的所有文件信息 那么使用代码怎么写呢?直接先上代码:(这之后 ...

  5. caffe学习笔记1

    博客 http://blog.csdn.net/seven_first/article/details/47378697 https://zhuanlan.zhihu.com/p/25127756?r ...

  6. SQLServer 2008 已成功与服务器建立连接,但是在登录前的握手期间发生错误。 (provider: SSL Provider, error: 0 - 等待的操作过时。

    在用SQL Server 2008 在连接其他电脑的实例时,一直提示“已成功与服务器建立连接,但是在登录前的握手期间发生错误. (provider: SSL Provider, error: 0 - ...

  7. SpringBoot整合StringData JPA

    目录 SpringBoot整合StringData JPA application.yml User.class UserRepository.java UserController SpringBo ...

  8. mysql创建用户并分配权限

    添加新用户 允许本地 IP 访问 localhost, 127.0.0.1 create user 'test'@'localhost' identified by '123456'; 允许外网 IP ...

  9. 分组ntile

    select order,ntile(3) over (order by order) from ss

  10. 数据库分库分表(sharding)系列

    数据库分库分表(sharding)系列     目录; (一) 拆分实施策略和示例演示 (二) 全局主键生成策略 (三) 关于使用框架还是自主开发以及sharding实现层面的考量 (四) 多数据源的 ...