摘要:预览因为项目是基于做的,本身就提供了的预览组件,使用起来也简单,如果业务需求需要放大缩小,这个组件就不满足了。
需求分析
业务要求,需要一个图片上传控件,需满足
多图上传
点击预览
图片前端压缩
支持初始化数据
相关功能及资源分析基本功能
先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件,没有完全满足需求的组件,过滤后找到 vue-upload-component 组件,功能基本都有,自定义也比较灵活,就以以此进行二次开发。
预览
因为项目是基于 vant 做的,本身就提供了 ImagePreview 的预览组件,使用起来也简单,如果业务需求需要放大缩小,这个组件就不满足了。
压缩
可以通过 canvas 相关api来实现压缩功能,还可以用一些第三方库来实现, 例如image-compressor.js
数据
因为表单页面涉及编辑的情况,上传组件为了展示优雅点,需要做点处理。首先就先要对数据格式和服务端进行约定,然后在处理剩下的
需求和实现思路基本确定,开始进入编码,先搭建可运行可测试的环境
第一步,创建相关目录
|- components |- ImageUpload |- ImageUpload.vue |- index.js
第二步,安装依赖
$ npm i image-compressor.js -S $ npm i vue-upload-component -S
第三步,编写核心主体代码
// index.js import ImageUpload from "./ImageUpload" export default ImageUpload
// ImageUpload.vue{{ file.progress }} %
正在上传
上传失败!
图片压缩也可以自己来实现,主要是理清各种文件格式的转换
compress(imgFile) { let _this = this return new Promise((resolve, reject) => { let reader = new FileReader() reader.onload = e => { let img = new Image() img.src = e.target.result img.onload = () => { let canvas = document.createElement("canvas") let ctx = canvas.getContext("2d") canvas.width = img.width canvas.height = img.height // 铺底色 ctx.fillStyle = "#fff" ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.drawImage(img, 0, 0, img.width, img.height) // 进行压缩 let ndata = canvas.toDataURL("image/jpeg", 0.3) resolve(_this.dataURLtoFile(ndata, imgFile.name)) } } reader.onerror = e => reject(e) reader.readAsDataURL(imgFile) }) } // base64 转 Blob dataURLtoBlob(dataurl) { let arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], {type: mime}) }, // base64 转 File dataURLtoFile(dataurl, filename) { let arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, {type: mime}) }最终效果
vue-upload-component 文档
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/98405.html
摘要:前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日,很多内容早已过期或是很多近期优秀组件未被收录,所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误,可以通过反馈给小肆。 前言 本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日,很多内容早已过期或是很多近期优...
阅读 3334·2021-09-22 15:01
阅读 486·2019-08-30 11:11
阅读 884·2019-08-29 16:17
阅读 1180·2019-08-29 12:23
阅读 1987·2019-08-26 11:48
阅读 3142·2019-08-26 11:48
阅读 1377·2019-08-26 10:33
阅读 1884·2019-08-26 10:30