如何利用Vue3和element-plus实现图片上传组件

这篇文章将为大家详细讲解有关如何利用Vue3和element-plus实现图片上传组件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。element-plus 提供了 uploader 组件，但是不好定制化，所以自己又造了个轮子，实现了一个图片上传的组件，它的预期行为是：1.还没上传图片时，显示上传卡片2.上传图片时显示进度条，隐藏上传卡片3.上传成功时显示图片缩略图，上传失败则显示失败免费云主机域名提示4.支持上传图片的预览和删除具体如下图所示：这里使用的图床是牛图网，无需注册，貌似也没有图片大小的限制，但是请不要上传违规图像。这里使用onUploadProgress来监视上传进度，但是实际上直接使用计算出来的进度往往会和实际的存在很大的偏差，也就是说：即使你还在上传，axios也会告诉你已经上传完了，所以这里把100的进度换成了80，真正的100进度应该在服务器返回url时设置。受到同源策略的限制，我们需要在 vue.config.js 中配置一下代理服务器：图片预览功能用的是vue-easy-light-box，如果没有安装的话可以npm install --save vue-easy-lightbox@next安装一下。下面是具体代码：

相关推荐: 旅游类小程序如何做好运营

这篇文章主要为大家展示了“旅游类小程序如何做好运营”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“旅游类小程序如何做好运营”这篇文章吧。旅游故事，吸引用户 其实对于每个旅游景点来说都有不少传闻故事，那么商家就可以利用…