基于 vue-upload-component 封装一个图片上传组件

wangbjun 发布于2019-08-23 12:22 / 576人阅读

摘要：预览因为项目是基于做的，本身就提供了的预览组件，使用起来也简单，如果业务需求需要放大缩小，这个组件就不满足了。

需求分析

业务要求，需要一个图片上传控件，需满足

多图上传

点击预览

图片前端压缩

支持初始化数据

相关功能及资源分析

基本功能
先到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

图片压缩也可以自己来实现，主要是理清各种文件格式的转换

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

【收藏】2019年最新Vue相关精品开源项目库汇总

摘要：前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日，很多内容早已过期或是很多近期优秀组件未被收录，所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误，可以通过反馈给小肆。前言本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日，很多内容早已过期或是很多近期优...

williamwen1986 2019-08-23 14:50 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

seanHai 2019-08-22 13:58 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

gityuan 2019-08-29 14:17 评论0 收藏0