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>
<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上传图片并预览并删除的更多相关文章
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
- input上传图片并预览
首先说一下input 大家都知道上传文件,图片是通过input 的file进行上传的. 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file&q ...
- input上传图片 显示预览信息
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决
html代码: <img id="pic" src="img/pic.png"/> </span><input id=" ...
- js上传图片及预览功能
详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...
- jquery解决file上传图片+图片预览
js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- 利用 ICEpdf 快速实现 pdf 文件预览功能
之前工作中,需要实现一个在线预览pdf的功能,一开始用的的 jQuery-media 插件来实现的,后来感觉有点慢,就继续寻找更好的替代品,直到遇见了 ICE pdf... ICEpdf (官网:ht ...
- 【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片,并且以九宫格展示图片
大家好,我叫小秃僧 这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能 @ 目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...
随机推荐
- Allegro16.6 PCB 导入DXF 外框后曲线不闭合
Allegro16.6 PCB 导入DXF 外框后曲线不闭合,边框不封闭导致的z-copy无法用的问题.解决办法: 菜单栏依次选择 shape--compose shape,options选择好ou ...
- Java 高级框架——Mybatis(一)
一, SQl复习 a,数据库SQL命令 创建数据库并指定编码 Create database 数据库名 default character set utf8 create database ssm d ...
- 转载---JQuery 对 Select option 的操作
下拉框: <select id="selectID" > <option value="1">1</option& ...
- 【HDFS API编程】查看目标文件夹下的所有文件、递归查看目标文件夹下的所有文件
使用hadoop命令:hadoop fs -ls /hdfsapi/test 我们能够查看HDFS文件系统/hdfsapi/test目录下的所有文件信息 那么使用代码怎么写呢?直接先上代码:(这之后 ...
- caffe学习笔记1
博客 http://blog.csdn.net/seven_first/article/details/47378697 https://zhuanlan.zhihu.com/p/25127756?r ...
- SQLServer 2008 已成功与服务器建立连接,但是在登录前的握手期间发生错误。 (provider: SSL Provider, error: 0 - 等待的操作过时。
在用SQL Server 2008 在连接其他电脑的实例时,一直提示“已成功与服务器建立连接,但是在登录前的握手期间发生错误. (provider: SSL Provider, error: 0 - ...
- SpringBoot整合StringData JPA
目录 SpringBoot整合StringData JPA application.yml User.class UserRepository.java UserController SpringBo ...
- mysql创建用户并分配权限
添加新用户 允许本地 IP 访问 localhost, 127.0.0.1 create user 'test'@'localhost' identified by '123456'; 允许外网 IP ...
- 分组ntile
select order,ntile(3) over (order by order) from ss
- 数据库分库分表(sharding)系列
数据库分库分表(sharding)系列 目录; (一) 拆分实施策略和示例演示 (二) 全局主键生成策略 (三) 关于使用框架还是自主开发以及sharding实现层面的考量 (四) 多数据源的 ...