vue本地上传并预览php,vue.js 实现图片本地预览 裁剪 压缩 上传功能
以下代码涉及 Vue 2.0 及 ES6 语法。
目标
纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式、长宽、大小的检测,减少浏览器交互。
现实是残酷的,为了兼容Ie9 还是用上了 flash,第二篇来解释解释。
代码结构
点我上传图片
new Vue({
el: '#wrap',
data: {
// 一张透明的图片
src:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
elInput: null
},
methods: {
change(e){
// ...
}
}
})
如何获取图片大小
现代浏览器中十分简单
function getSize(e){
return e.target.files[0].size;
}
但 ie9 下暂时没有找到纯 JS 的方案。
因此,在需要判断大小时,遇到 ie9 直接绕过不去判断
如何预览本地图片
const refs = this.$refs
const elInput = refs.input
const elImg = refs.img
现代浏览器中,通过调用 FileReader 读取本地图片,将图片地址转成 Base64 格式实现预览。
function getSrc(){
const reader = new FileReader();
reader.onload = (e) => {
const src = e.target.result;
elImg.src = src;
};
if (elInput.files && elInput.files[0]) {
reader.readAsDataURL(elInput.files[0]);
}
}
但是问题又来了,ie9 并不支持 FileReader,但可以通过 ie 滤镜显示。
function getSrc(){
elInput.select();
elInput.blur();
const src = document.selection.createRange().text;
document.selection.empty();
elImg.style.filter = `progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='${src}')`;
}
滤镜中 sizingMethod='scale'的写法是为了图片能适应内容缩放。
由于 IE9 对安全限制有所增强,实践中会遇到以下两个问题:
如果 file 控件获得焦点,则 document.selection.createRange()拒绝访问,因此需要在 elInput.select()后面加一句 elInput.blur() 即可。
为了让上传按钮更美观,默认给 input[type=file]的设置了样式visible:hidden,这样会导致 ie9 下报错。应该会被浏览器认为欺骗用户点击,只好曲线救国。
label{
overflow:hidden;
}
label input[type='file']{
position:absolute;
top:9999px;
left:9999px;
}
如何获取图片长宽
同理,利用 ie 滤镜和 FileReader 的方案对 ie9 和非 ie9 分别实现。
ie9 的方案
参数 src 接受的是本地图片路径
let tempEl;
const getSizeIncompatible = (src, callback) => {
if (!tempEl) {
tempEl = document.createElement('div');
tempEl.style.position = 'absolute';
tempEl.style.width = '1px';
tempEl.style.height = '1px';
tempEl.style.left = '-9999px';
tempEl.style.top = '-9999px';
tempEl.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)';
document.body.insertBefore(tempEl, document.body.firstChild);
}
tempEl.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
callback(tempEl.offsetWidth, tempEl.offsetHeight);
};
其中 sizingMethod='image'是为了图片显示原始大小。
非 ie9 方案
参数 src 接受的是 base64 编码后的图片路径
const getSize = (src, callback) => {
const image = new Image();
image.onload = () => {
callback(image.width, image.height);
};
image.src = src;
};
参考
总结
以上所述是小编给大家介绍的vue.js 实现图片本地预览 裁剪 压缩 上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
vue本地上传并预览php,vue.js 实现图片本地预览 裁剪 压缩 上传功能相关推荐
- ie js html 压缩,H5图片裁剪-压缩-上传-神奇的Croppie.js
Croppie.js之图片裁剪压缩上传 h5图片裁剪, 压缩, 上传, 预览是常见功能, 幸运的是我们有cropp.js这款利器. 1. style .actions button, .actions ...
- js进行图片本地下载(多张打包,单张)
js进行图片本地下载 这里我分两种一种是单张图片下载比较简单,另外一种是打包图片下载 批量图片下载 import JSZip from "jszip"; import FileSa ...
- element upload预览_vue element upload实现图片本地预览
vue使用element实现本地预览,最主要的是将图片路径转换为base64,供大家参考,具体内容如下 HTML class="avatar-uploader" action=&q ...
- img pdf 展示_pdf.js实现图片在线预览
项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...
- java pdf 预览_pdf.js实现图片在线预览
项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...
- 微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...
- PDF在线预览插件touchPDF.js:手机端预览
接上一篇web端预览,博主找了一篇关于手机端的预览插件,丑是丑了点,但是能用,下面就来介绍一下吧! PDF在线预览插件:手机端预览 1.编辑界面的HTML代码 2.第二步就没了 3.既然这样那我们直接 ...
- 前端页面预览word_jquery.media.js实现前端页面预览
预览doc 预览docx 预览pdf 预览pdf × function toView(filePath){ var url = [[@{/converter/preview}]]+'?filePath ...
- js实现图片放大预览(jq+css)
阔别四个月我又杀回来了,公司最近接了个前后端分离的项目,前端居然是java的目录结构, 我丢藕!!!我个写前端vue的怎么活
最新文章
- Android开发之大位图压缩水印处理
- android屏幕适配的目的,Android 不同分辨率下屏幕适配的实战方案与经验总结
- IOS 设备信息读取
- java 实现 web 客户端_Java web客户端和服务器端交互的原理
- 硬核分析|腾讯云原生OS内存回收导致关键业务抖动问题
- 《大数据》第1期“研究”——大数据管理系统评测基准的 挑战与研究进展(上)...
- dismiss android,[转]Android对话框中dismiss和cancel、hide的区别
- 95-10-140-启动-权限
- C++ 实现排序问题:时间复杂度O(n),空间复杂度O(1)
- Bailian2964 日历问题【日期+模拟】
- 赋能行业 共建生态 阿里巴巴首次亮相义乌标准展
- ASP.NET MVC 重点教程一周年版 第七回 UrlHelper
- linux终端字体安装,在Gnome-terminal下安装以及使用Monaco字体
- 从苏宁电器到卡巴斯基(第二部)第09篇:我在卡巴的日子 IX
- 中国神话--学术性研究
- oracle分区详解
- 苹果AppStore应用商店生存之道以及市场攻略最全解析
- 推荐信息安全书籍27本(含电子书)
- 解决: Tomcat 启动项目没问题,访问网页页面出现空白无显示
- iscsi btrfs 扩容操作