如何实现Vue中的图片裁剪与上传组件功能？

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

先看总体效果：上传文件做了大小和类型的限制，在动态图中无法显示出来。使用file类型的input实现选择本地文件，但浏览器原生的文件上传按钮的值不尽人意，而且按钮上的文字‘上传’不够直观。

先看一下总体效果:

上传文件做了大小和类型的限制，在动图中无法展现出来。

使用file类型的input实现选择本地文件

但是浏览器原生的文件上传按钮的颜值不尽人意，而且按钮上的文字是无法改变的，我需要把这个上传文件的按钮改造一下。

• 方法1：使用label元素来触发一个隐藏的file类型的 input元素；（缺点：在多人开发时，可能出现重复的元素id，导致难以预料的bug）

<input type="file" id='up_file_input' v-show='false' > <label for='up_file_input'></label>

• 方法2：或者在这个label元素的click事件函数中手动触发文件上传按钮的click事件。