vue图片上传及压缩组件的封装

最新推荐文章于 2025-07-03 17:45:08 发布

一只正在成长的程序猿

最新推荐文章于 2025-07-03 17:45:08 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue上传组件 vue图片上传 vue图片上传及压缩 vue图片压缩 compressorjs

本文链接：https://blog.youkuaiyun.com/weixin_44251396/article/details/97389816

vue 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了一款用于Vue项目的图片上传及压缩组件的封装方法。通过使用compressorjs库，该组件能够实现图片的高效上传与压缩，降低带宽消耗，提升用户体验。文章详细阐述了组件的安装、引入及具体用法，包括如何自定义方法接收图片码及监听后端返回的数据。

vue图片上传及压缩组件的封装

源码地址

使用方法：

先去上面的链接把组件，复制到自己的components文件夹内

1.先下载

cnpm install compressorjs --save-dev //压缩

2.引入组件

<script>
import uploadPictures from "../../components/uploadPictures";
export default {
  components: {
    uploadPictures
  },
},
</script>

3.用法

//emitType:自定义方法，接收从后端返回的图片码
//title：名字，身份证上传、银行卡上传，（需要则传、不需要不传）
<uploadPictures :openTitle="{emitType:'idCard',title:$t('m.openingInformation.HKPic')}"/>

//在mounted里面监听后端返回的码
 mounted() {
    this.judgeLogin();
      this.$on('idCard',msg=>{
      console.log(msg)
    })
       this.$on('addressCard',msg=>{
      console.log(msg)
    })
  }