基于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 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
js简易版购物车功能
Jun 17 Javascript
Angular实现响应式表单
Aug 04 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
js根据后缀判断文件文件类型的代码
May 09 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 异常处理实现代码
2009/03/10 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python随机读取文件实现实例
2017/05/25 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
自我评价的正确写法
2013/09/19 职场文书
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
医学毕业生自我鉴定
2013/10/30 职场文书
村官工作鉴定评语
2014/01/27 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
资金申请报告范文
2015/05/14 职场文书
黄河绝恋观后感
2015/06/08 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技