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


Posted in Javascript onOctober 16, 2018

需求分析

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

  • 多图上传
  • 点击预览
  • 图片前端压缩
  • 支持初始化数据

相关功能及资源分析

基本功能

先到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 
<template>
 <div class="m-image-upload">
 <!--
  这里分为两段遍历,理由是:在编辑情况下要默认为组件添加默认数据,虽然说组件提供了 `add` 方法,
  但在编辑状态下,需要把 url 形式的图片转换成 File 之后才可以添加进去,略微麻烦。
  所以分两次遍历,一次遍历表单对象里的图片(直接用img标签展示,新上传的图片可以通过 blob 来赋值 src),第二次遍历组件里的 files
 -->
 <div
  class="file-item"
  v-for="(file, index) in value">
  <img
  :src="file.thumb || file.url"
  @click="preview(index)"
  />
  <van-icon
  name="clear"
  class="close"
  @click="remove(index, true)"/> <!-- 把图片从数组中删除 -->
 </div>
 <div
  :class="{'file-item': true, 'active': file.active, 'error': !!file.error}"
  v-for="(file, index) in files"> <!-- 加几个样式来控制 `上传中` 和 `上传失败` 的样式-->
  <img
  v-if="file.blob"
  :src="file.blob"
  />
  <div class="uploading-shade">
  <p>{{ file.progress }} %</p>
  <p>正在上传</p>
  </div>
  <div class="error-shade">
  <p>上传失败!</p>
  </div>
  <van-icon
  name="clear"
  class="close"
  @click="remove(index)"
  />
 </div>
 <file-upload
  ref="uploader"
  v-model="files"
  multiple
  :thread="10"
  extensions="jpg,gif,png,webp"
  post-action="http://localhost:3000/file/upload"
  @input-file="inputFile"
  @input-filter="inputFilter"
 >
  <van-icon name="photo"/>
 </file-upload>
 </div>
</template>

<script>
 /**
 * 图片上传控件
 * 使用方法:
  import ImageUpload from '@/components/ImageUpload'
  ...
  components: {
  ImageUpload
  },
  ...
  <image-upload :value.sync="pics"/>
 */

 import uploader from 'vue-upload-component'
 import ImageCompressor from 'image-compressor.js';
 import { ImagePreview } from 'vant';

 export default {
 name: 'ImageUpload',
 props: {
  value: Array // 通过`.sync`来添加更新值的语法题,通过 this.$emit('update:value', this.value) 来更新
 },
 data() {
  return {
  files: [] // 存放在组件的file对象
  }
 },
 components: {
  'file-upload': uploader
 },
 methods: {
  // 当 add, update, remove File 这些事件的时候会触发
  inputFile(newFile, oldFile) {
  // 上传完成
  if (newFile && oldFile && !newFile.active && oldFile.active) {
   // 获得相应数据
   if (newFile.xhr && newFile.xhr.status === 200) {
   newFile.response.data.thumb = newFile.thumb // 把缩略图转移
   this.value.push(newFile.response.data) // 把 uploader 里的文件赋值给 value
   this.$refs.uploader.remove(newFile) // 删除当前文件对象
   this.$emit('update:value', this.value) // 更新值
   }
  }

  // 自动上传
  if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
   if (!this.$refs.uploader.active) {
   this.$refs.uploader.active = true
   }
  }
  },
  // 文件过滤,可以通过 prevent 来阻止上传
  inputFilter(newFile, oldFile, prevent) {
  if (newFile && (!oldFile || newFile.file !== oldFile.file)) {
   // 自动压缩
   if (newFile.file && newFile.type.substr(0, 6) === 'image/') { // && this.autoCompress > 0 && this.autoCompress < newFile.size(小于一定尺寸就不压缩)
   newFile.error = 'compressing'
   // 压缩图片
   const imageCompressor = new ImageCompressor(null, {
    quality: .5,
    convertSize: Infinity,
    maxWidth: 1000,
   })
   imageCompressor.compress(newFile.file).then((file) => {
    // 创建 blob 字段 用于图片预览
    newFile.blob = ''
    let URL = window.URL || window.webkitURL
    if (URL && URL.createObjectURL) {
    newFile.blob = URL.createObjectURL(file)
    }
    // 缩略图
    newFile.thumb = ''
    if (newFile.blob && newFile.type.substr(0, 6) === 'image/') {
    newFile.thumb = newFile.blob
    }
    // 更新 file
    this.$refs.uploader.update(newFile, {error: '', file, size: file.size, type: file.type})
   }).catch((err) => {
    this.$refs.uploader.update(newFile, {error: err.message || 'compress'})
   })
   }
  }
  },
  remove(index, isValue) {
  if (isValue) {
   this.value.splice(index, 1)
   this.$emit('update:value', this.value)
  } else {
   this.$refs.uploader.remove(this.files[index])
  }
  },
  preview(index) {
  ImagePreview({
   images: this.value.map(item => (item.thumb || item.url)),
   startPosition: index
  });
  }
 }
 }
</script>

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

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封装一个图片上传组件的示例

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

参考资料

vue-upload-component 文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 Javascript
Postman的下载及安装教程详解
Oct 16 #Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 #Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 #Javascript
iView框架问题整理小结
Oct 16 #Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 #Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 #Javascript
ajax与jsonp的区别及用法
Oct 16 #Javascript
You might like
PHP编实现程动态图像的创建代码
2008/09/28 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
js select option对象小结
2013/12/20 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python中is和==的区别详解
2018/11/15 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python开发游戏的前期准备
2019/05/05 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
董事长秘书岗位职责
2013/11/29 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
合伙协议书范本
2014/04/21 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
长城的导游词
2015/01/30 职场文书
应聘教师求职信范文
2015/03/20 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书