基于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，一经查实，立即删除！

相关文章

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

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

目录 一、引入线程安全 &#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); }; 将它转换为使…
阅读更多...
【笔记】树(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…
阅读更多...
【机器学习】在电子商务（淘*拼*京*—＞抖）的应用分析

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

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

【三剑客和正则表达式】

文章目录 学习目标一、什么是三剑客1.三剑客grep2.三剑客sed3.三剑客awk4.正则过滤例子15.正则过滤例子2 总结 学习目标 1.学会使用 grep 2.学会使用 sed 3.学会使用 awk 4.学会使用正则表达式一、什么是三剑客 正则三剑客&#xff1a;grep sed awk 1.三剑客grep # 擅长过滤…
阅读更多...
【深度学习】YOLOv8训练，交通灯目标检测

【深度学习】YOLOv8训练，交通灯目标检测

文章目录 一、数据处理二、环境三、训练 一、数据处理 import traceback import xml.etree.ElementTree as ET import os import shutil import random import cv2 import numpy as np from tqdm import tqdmdef convert_annotation_to_list(xml_filepath, size_width, size_he…
阅读更多...
海山数据库（He3DB）代理ProxySQL使用详解：（二）功能实测

海山数据库（He3DB）代理ProxySQL使用详解：（二）功能实测

读写分离实测 ProxySQL官方demo演示了三种读写分离的方式&#xff1a;使用不同的端口进行读写分离、使用正则表达式进行通用的读写分离、使用正则和digest进行更智能的读写分离。最后一种是针对特定业务进行的优化调整&#xff0c;也可将其归结为第二种方式&#xff0c;下边分…
阅读更多...
MySQL备份与日志练习

MySQL备份与日志练习

1、创建对mysql数据库test1的定时备份任务&#xff0c;频率是每周一的2点 create database test1;crond -e0 2 * * 1 mysqldump -u root -pAdmin123 --databases test1 > /opt/test1.sql2、test1中有t1、t2、t3三张表&#xff0c;要求只备份t2这张表 mysqldump -u root -pA…
阅读更多...
Python 机器学习 基础 之 数据表示与特征工程 【单变量非线性变换 / 自动化特征选择/利用专家知识】的简单说明

Python 机器学习 基础 之 数据表示与特征工程 【单变量非线性变换 / 自动化特征选择/利用专家知识】的简单说明

Python 机器学习 基础 之 数据表示与特征工程 【单变量非线性变换 / 自动化特征选择/利用专家知识】的简单说明 目录 Python 机器学习 基础 之 数据表示与特征工程 【单变量非线性变换 / 自动化特征选择/利用专家知识】的简单说明 一、简单介绍 二、单变量非线性变换 三、自…
阅读更多...
知识图谱数据预处理笔记

知识图谱数据预处理笔记

知识图谱数据预处理笔记 0. 引言1. 笔记1-1. \的转义1-2. 特殊符号的清理1-3. 检查结尾是否正常1-4. 检查<>是否存在1-5. 两端空格的清理1-6. 检查object内容长时是否以<开始 0. 引言 最近学习知识图谱&#xff0c;发现数据有很多问题&#xff0c;这篇笔记记录遇到的…
阅读更多...
软件设计师备考笔记（九）：数据库技术基础

软件设计师备考笔记（九）：数据库技术基础

文章目录 一、基本概念二、数据模型&#xff08;一&#xff09;基本概念&#xff08;二&#xff09;E-R模型&#xff08;三&#xff09;数据模型 三、关系代数&#xff08;一&#xff09;关系数据库的基本概念&#xff08;二&#xff09;五种基本的关系代数运算&#xff08;三&…
阅读更多...
bugku 网络安全事件应急响应

bugku 网络安全事件应急响应

开启靶场&#xff1a; 开始实验&#xff1a; 使用Xshell登录服务器&#xff0c;账号及密码如上图。 1、提交攻击者的IP地址 WP: 找到服务器日志路径&#xff0c;通常是在/var/log/&#xff0c;使用cd /var/log/&#xff0c;ls查看此路径下的文件. 找到nginx文件夹。 进入ng…
阅读更多...
【Jenkins】Centos7安装Jenkins（环境：JDK11，tomcat9，maven3.8）

【Jenkins】Centos7安装Jenkins（环境：JDK11，tomcat9，maven3.8）

目录 Jenkins部署环境Maven安装1.上传安装包2.解压3.配置Maven环境变量4.使配置文件立即生效5.校验Maven安装6.Maven配置阿里云仓库7.Maven配置依赖下载位置 Git安装安装监测安装 JDK17安装1.查看旧版本JDK2.卸载旧版本JDK3.查看是否卸载干净4.创建java目录5.下载JDK11安装包6.…
阅读更多...
Excel中Lookup函数

Excel中Lookup函数

#Excel查找函数最常用的是Vlookup&#xff0c;而且是经常用其精确查找。Lookup函数的强大之处在于其“二分法”的原理。 LOOKUP&#xff08;查找值&#xff0c;查找区域&#xff08;Vector/Array&#xff09;&#xff0c;[返回结果区域]&#xff09; 为什么查找区域必须升序/…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023