基于Vue的图片文件上传与压缩组件的设计与实现

摘要

随着前端技术的发展，系统开发的复杂度不断提升，传统开发方式将整个系统做成整块应用，导致修改和维护成本高昂。组件化开发作为一种解决方案，能够实现单独开发、单独维护，并能灵活组合组件，从而提升开发效率和降低维护成本。本文旨在介绍一款基于Vue的图片文件上传组件，该组件不仅支持图片文件上传，还集成了图片压缩功能，以满足现代前端应用的需求。

一、引言

在现代前端开发中，组件化已成为提高开发效率和可维护性的关键手段。图片文件上传作为前端应用中常见的功能之一，其实现方式往往涉及多个步骤和复杂的逻辑。通过组件化开发，我们可以将图片文件上传功能封装成一个独立的组件，实现单独开发和维护，同时提供统一的接口供其他组件使用，从而提高系统的可复用性和可扩展性。

二、组件化开发的优势

组件化开发通过将系统拆分为多个独立的组件，实现了代码的解耦和模块化。这种开发方式具有以下优势：

  1. 独立开发：每个组件可以独立开发、测试和部署，提高了开发的并行度和效率。

  2. 单独维护：组件的维护变得更为简单，只需关注特定组件的逻辑和功能，降低了维护成本。

  3. 灵活组合：组件之间可以灵活组合，适应不同的业务场景和需求。

效果图如下：

图片

图片

  1. 需求分析

图片文件上传组件需要满足以下需求：

  • 支持图片文件的选择和上传。

  • 支持图片文件的压缩，以减小文件大小和上传时间。

  • 提供上传进度和结果反馈。

  1. 技术选型

选择Vue作为前端框架，利用其组件化的特性和响应式数据绑定机制来实现图片文件上传组件的开发。同时，结合前端文件处理库和浏览器原生API来实现图片文件的压缩和上传功能。

  1. 组件实现

（1）文件选择与上传

使用<input type="file">元素允许用户选择图片文件，并通过监听change事件获取到文件信息。然后，使用FormData对象将文件包装成表单数据，并通过axios等HTTP库发送POST请求将文件上传到服务器。

（2）图片压缩

在文件上传之前，使用前端文件处理库（如compressorjs）对图片文件进行压缩。压缩过程中可以设置压缩质量、压缩格式等参数，以满足不同场景的需求。压缩完成后，将压缩后的文件用于上传。

（3）上传进度与结果反馈

通过监听HTTP请求的progress事件来获取上传进度，并在组件中显示上传进度条。同时，监听请求的then和catch方法分别处理上传成功和失败的情况，并向外部提供上传结果的事件或回调函数。

cc-oneImgFileUpload单个图片上传组件

使用方法
<!-- photoList：选择的图片数组  @click：图片选择事件-->
<cc-oneImgFileUpload :photoList="photoList" @click="addPhotoClick"></cc-oneImgFileUpload>
HTML代码实现部分
<template><view class="content" v-if="seen"><form @submit="formSubmit" @reset="formReset"><view class="inputView"><text class="leftTitle">交通指引</text></view><textarea class="rightTextarea" name="direct" placeholder=" 请输入交通指引" /><view class="inputView"><text class="leftTitle">房屋介绍</text></view><textarea class="rightTextarea" name="village" placeholder=" 请输入房屋介绍" /><view class="inputView"><text class="leftTitle">添加房源照片（仅可添加1张）</text></view><!-- photoList：选择的图片数组  @click：图片选择事件--><cc-oneImgFileUpload :photoList="photoList" @click="addPhotoClick"></cc-oneImgFileUpload><view class="uni-btn-v"><button class="botBtn" type="primary" form-type="submit">提交</button><view class="tipText"> 注意事项: 请确保您填写的房屋信息真实无误 </view></view></form></view>
</template><script>import Vue from 'vue';export default {data() {return {photoList: [],seen: true,myParamData: {},isClick: false,};},methods: {formSubmit: function(e) {console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));if (this.isClick) {let that = this;setTimeout(function() {that.isClick = false;}, 600)return;}this.isClick = true;var formdata = e.detail.value;this.myParamData = Object.assign(this.myParamData, formdata);console.log('页面3 myParamData=' + JSON.stringify(this.myParamData));if (formdata['direct'].length < 2) {uni.showModal({content: '请输入交通指引',showCancel: false});return;}if (formdata['village'].length < 2) {uni.showModal({content: '请输入所在小区介绍',showCancel: false});return;}if (this.photoList.length < 1) {uni.showModal({content: '请添加房源照片',showCancel: false});return;}uni.showLoading({title: '上传中'})let myFilePath = '';if (this.photoList.length > 0) {myFilePath = this.photoList[0].filePath;}// 服务器地址上传地址 仅为示例，非真实的接口地址let baseUrl = "http://gzcc.com/cc//appSc/up"uni.uploadFile({url: baseUrl, //仅为示例，非真实的接口地址filePath: myFilePath, //文件路径name: 'image', //服务端文件接受keyformData: this.myParamData,success: (uploadFileRes) => {uni.hideLoading();let dataDic = JSON.parse(uploadFileRes.data);console.log('uploadFileRes成功 = ' + JSON.stringify(uploadFileRes));console.log('datadic成功 = ' + typeof(dataDic));console.log('code码 = ' + dataDic['code']);}});},addPhotoClick() {uni.hideLoading();let myThis = this;if (myThis.photoList.length >= 1) {myThis.photoList = [];}uni.chooseImage({count: 1,sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: function(res) {myThis.photoList = [{'filePath': res.tempFilePaths[0]}];console.log('选择图片 =' + JSON.stringify(myThis.photoList));}});},}};
</script><style>.uni-form-item .title {padding: 20rpx 0;}.content {display: flex;flex-direction: column;width: 100%;height: auto;}.inputView {flex-direction: row;display: flex;height: 40px;align-items: center;width: 100%;}.line {width: 90%;height: 2rpx;margin-left: -2rpx;background-color: #f8f8f8;margin-left: 5%;}.leftTitle {margin-left: 40rpx;width: 284px;height: 32px;line-height: 32px;font-size: 28rpx;color: #333333;}.rightTextarea {margin-left: 5%;width: 90%;height: 106px;line-height: 40rpx;border-radius: 12rpx;border: solid 1px #F5F5F5;font-size: 15px;}.uni-btn-v {width: 100%;height: auto;}.botBtn {width: 90%;margin-top: 36px;height: 48px;}.tipText {width: 100%;margin-left: 0px;text-align: center;color: #666666;margin-top: 36px;margin-bottom: 36px;font-size: 28rpx;}
</style>

四、组件的应用与效果

将图片文件上传与压缩组件应用于实际项目中，通过与其他组件和业务的结合，实现了快速开发和高效维护。该组件不仅简化了图片文件上传的流程，还通过图片压缩减小了文件大小，降低了上传时间和服务器压力。同时，组件的独立性和可复用性也提高了系统的可扩展性和可维护性。

五、总结与展望

本文介绍了基于Vue的图片文件上传与压缩组件的设计与实现过程。通过组件化开发，我们成功地将图片文件上传功能封装成一个独立的组件，并集成了图片压缩功能，以满足现代前端应用的需求。未来，我们将继续探索更多类型的组件和更高效的开发方式，以提升前端开发的效率和可维护性。

项目下载地址:

https://ext.dcloud.net.cn/plugin?id=13066

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/13995.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JS-02对象的基本使用

JS-02对象的基本使用

目录 1 创建一个对象 2 对象属性操作 2.1 获取属性 第一种方式&#xff1a;.语法 第二种方式&#xff1a;[]语法 2种方式的差异 2.2 设置属性 2.3 删除属性 3 案例 1 创建一个对象 创建一个对象&#xff0c;包含了两个属性&#xff0c;两个方法&#xff1a; var studen…
阅读更多...
17. FastDFS面试题汇总

17. FastDFS面试题汇总

Java全栈面试题汇总目录-CSDN博客 1. 什么是FastDFS&#xff1f; FastDFS是用C语言编写的一款开源的分布式文件系统。FastDFS为互联网量身定制&#xff0c;充分考虑了冗余备份、负载均衡、线性扩容等机制&#xff0c;并注重高可用、高性能等指标&#xff0c;使用FastDFS很容易…
阅读更多...
什么是线程安全？如何保证线程安全？

什么是线程安全？如何保证线程安全？

目录 一、引入线程安全 &#x1f447; 二、 线程安全&#x1f447; 1、线程安全概念 &#x1f50d; 2、线程不安全的原因 &#x1f50d; 抢占式执行&#xff08;罪魁祸首&#xff0c;万恶之源&#xff09;导致了线程之间的调度是“随机的” 多个线程修改同一个变量 修改…
阅读更多...
ESP8266实现获取天气情况

ESP8266实现获取天气情况

利用太极创客提供的ESP8266 心知天气库获取天气情况并显示 心知天气库地址&#xff1a; ESP8266-心知天气: 本库主要功能为使用ESP8266物联网开发板通过心知天气 API 获取天气等信息。 clone到本地: git clone https://gitee.com/taijichuangke/ESP8266-Seniverse.git 安装该…
阅读更多...
跟着Kimi学习结构化提示词：19套内置提示词都在这里了！

跟着Kimi学习结构化提示词：19套内置提示词都在这里了！

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…
阅读更多...
C++ Primer Plus第十六章复习题

C++ Primer Plus第十六章复习题

1、考虑下面的 类声明 class RQ1 { private:char * st; public:RQ1(){st new char [1]; strcpy(st,"");}RQ1(const RQ1 & rq){st new char [strlen(rq.st)1]; strcpy(st,rq.st);}~RQ1(){delete [] st};RQ & OPERATOR (cosnt RQ &rq); }; 将它转换为使…
阅读更多...
Java技术深度解析：高级面试问题与精粹答案（一）

Java技术深度解析：高级面试问题与精粹答案（一）

Java 面试问题及答案 问题1&#xff1a;请解释什么是Java虚拟机&#xff08;JVM&#xff09;以及它的作用是什么&#xff1f; 答案1&#xff1a; Java虚拟机&#xff08;JVM&#xff09;是一个可以执行Java字节码的虚拟计算机。它是一个抽象的计算机&#xff0c;能够通过软件…
阅读更多...
【笔记】树(Tree)

【笔记】树(Tree)

一、树的基本概念 1、树的简介 之前我们都是在谈论一对一的线性数据结构&#xff0c;可现实中也有很多一对多的情况需要处理&#xff0c;所以我们就需要一种能实现一对多的数据结构--“树”。 2、树的定义 树&#xff08;Tree&#xff09;是一种非线性的数据结构&#xff0…
阅读更多...
作物水文模型AquaCrop---用于评估作物对水的需求、灌溉计划和管理策略

作物水文模型AquaCrop---用于评估作物对水的需求、灌溉计划和管理策略

AquaCrop是由世界粮食及农业组织&#xff08;FAO&#xff09;开发的一个先进模型&#xff0c;旨在研究和优化农作物的水分生产效率。这个模型在全球范围内被广泛应用于农业水管理&#xff0c;特别是在制定农作物灌溉计划和应对水资源限制方面显示出其强大的实用性。AquaCrop 不…
阅读更多...
如何在海豚调度器自动监测报表是否跑出数据

如何在海豚调度器自动监测报表是否跑出数据

在数据仓库报表开发时，有的报表依赖的表多，虽然在海豚调度任务上是跑成功，但实际上没有跑出数据来。开发人员负责的任务和表越来越多，每天去手动检查费时费力，不去理睬默认是成功的，等到业务或产品发现问题时，又给人一种不专业不负责的感觉。 比较好的方式是用代码进行自…
阅读更多...
Python知识点复习

Python知识点复习

文章目录 Input & OutputVariables & Data typesPython字符串重复&#xff08;字符串乘法&#xff09;字符串和数字连接在一起print时&#xff0c;要强制类型转换int为str用input()得到的用户输入&#xff0c;是str类型&#xff0c;如果要以int形式计算的话&#xff0c…
阅读更多...
SkyWalking 介绍及部署

SkyWalking 介绍及部署

1、SkyWalking简介2、SkyWalking的搭建 2.1 部署Elasticsearch2.2 部署SkyWalking-Server2.3 部署SkyWalking-UI3、应用接入 3.1 jar包部署方式3.2 dockerfile方式3.3 DockerFile示例4、SkyWalking UI 界面说明 4.1 仪表盘 4.1.1 APM &#xff08;1&#xff09;全局维度&#x…
阅读更多...
UBUNTU22.04无法安装nvidia-driver-550 依赖于 nvidia-dkms-550 (＜= 550.54.15-1)

UBUNTU22.04无法安装nvidia-driver-550 依赖于 nvidia-dkms-550 (＜= 550.54.15-1)

类似的报错信息&#xff0c;就是卡在了nvidia-dkms-550无法安装 Loading new nvidia-550.40.07 DKMS files… Building for 6.5.0-15-generic Building for architecture x86_64 Building initial module for 6.5.0-15-generic ERROR: Cannot create report: [Errno 17] File e…
阅读更多...
前端canvas项目实战——在线图文编辑器(十)：小地图MiniMap(上)

前端canvas项目实战——在线图文编辑器(十)：小地图MiniMap(上)

目录 前言一、 效果展示二、 实现步骤0. 行动前的思考1. 为小地图更新「背景图」2. 为小地图更新「滑动窗口」2.1 获取新的滑动窗口「宽高」2.2 获取新的滑动窗口「位置」3. 为小地图更新「遮罩」后记前言 上一篇博文中，我们引入了「逻辑画布」的概念，让整个工具的页面看起来…
阅读更多...
JPA 3万字面试宝典

JPA 3万字面试宝典

目录 什么是JPA？ JPA和Hibernate有什么区别？ 什么是ORM（对象关系映射）？ 什么是Entity？
阅读更多...
【机器学习】在电子商务（淘*拼*京*—＞抖）的应用分析

【机器学习】在电子商务（淘*拼*京*—＞抖）的应用分析

机器学习与大模型&#xff1a;电子商务的新引擎 一、电子商务的变革与挑战二、机器学习与大模型的崛起三、机器学习与大模型在电子商务中的应用实践个性化推荐精准营销智能客服库存管理与商品定价 四、总结与展望 随着互联网的飞速发展&#xff0c;电子商务已经成为我们生活中不…
阅读更多...
NDIS小端口驱动(四)

NDIS小端口驱动(四)

NDIS中断相关 1. 注册和取消注册中断&#xff1a; 微型端口驱动程序调用 NdisMRegisterInterruptEx 来注册中断。 驱动程序分配并初始化 NDIS_MINIPORT_INTERRUPT_CHARACTERISTICS 结构&#xff0c;以指定中断特征和函数入口点&#xff0c;驱动程序将结构传递给 NdisMRegister…
阅读更多...
【三剑客和正则表达式】

【三剑客和正则表达式】

文章目录 学习目标一、什么是三剑客1.三剑客grep2.三剑客sed3.三剑客awk4.正则过滤例子15.正则过滤例子2 总结 学习目标 1.学会使用 grep 2.学会使用 sed 3.学会使用 awk 4.学会使用正则表达式一、什么是三剑客 正则三剑客&#xff1a;grep sed awk 1.三剑客grep # 擅长过滤…
阅读更多...
【MySQL精通之路】查询优化器的使用(8)

【MySQL精通之路】查询优化器的使用(8)

MySQL通过影响查询计划评估方式的系统变量、可切换优化、优化器和索引提示以及优化器成本模型提供优化器控制。 服务器在column_statistics数据字典表中维护有关列值的直方图统计信息&#xff08;请参阅第10.9.6节“Optimizer统计信息”&#xff09;。与其他数据字典表一样&am…
阅读更多...
#Ethereum 现货ETF 问题汇总 转

#Ethereum 现货ETF 问题汇总 转

专题&#xff1a; #Ethereum 现货ETF 问题汇总&#xff0c;包括了多数小伙伴们的疑问&#xff0c;有任何忽略请留言给我&#xff0c;我会补充。 1. #ETH 现货ETF何时公布&#xff1f; 一般来说会在北京时间的5月24日凌晨2点至4点之间&#xff0c;不排除稍微延后到凌晨6点的可能…
阅读更多...
最新文章

Copyright @ 2022~2023