Vue版Upload组件如何改写为长尾词？

本文共计2511个文字，预计阅读时间需要11分钟。

目录+前言+今天分享我的第N个Vue组件，Upload

1.组件设计+组件实现

1. mixins 2. 上传组件的实现

2.完整的代码+效果图+图片压缩前后大小对比

前言+之前对一些主流手机拍摄的照片大小做过对比

目录

• 前言
• 今天分享我的第N个Vue组件，Upload
• 1.组件设计
• 组件实现
• 1.mixins
• 2. 上传组件的实现
• 3. 完整的代码
• 效果图
• 图片压缩前后大小对比

前言

之前对一些主流手机拍出的照片大小做过对比，华为P30拍出的照片3M左右，同事的小米9不知开启了什么模式拍出了10M以上的照片。照片太大了对服务端上传文件造成了不小的压力，对此，后端对前端提出了图片上传前对图片进行压缩。我们目前所用的UI库Upload组件并不支持对上传的图片进行压缩，所以花了一点时间自己写了上传的组件。

今天分享我的第N个Vue组件，Upload

1.组件设计

• 只有图片裁进行压缩，文件没法压缩。
• 超过规定大小的图片裁进行压缩，不应该是个图片就压缩，内存过下的图片没必要压缩。