基于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 相关文章推荐
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
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
解决GD中文乱码问题
2007/02/14 PHP
smarty section简介与用法分析
2008/10/03 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
python实现在字符串中查找子字符串的方法
2015/07/11 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
经济信息系毕业生自荐信范文
2014/03/15 职场文书
篮球比赛口号
2014/06/10 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
授权委托书样本
2014/09/25 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
单位委托函范文
2015/01/29 职场文书
公积金贷款承诺书
2015/04/30 职场文书
辩护词范文大全
2015/05/21 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
通讯稿范文
2015/07/22 职场文书
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python