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

news2024/11/22 12:02:36

摘要

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

一、引言

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

二、组件化开发的优势

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

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

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

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

效果图如下:

图片

图片

  1. 需求分析

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

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

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

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

  1. 技术选型

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

  1. 组件实现

(1)文件选择与上传

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

(2)图片压缩

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

(3)上传进度与结果反馈

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

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', //服务端文件接受key
                    formData: 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.coloradmin.cn/o/1685089.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Leetcode861. 翻转矩阵后的得分

Every day a Leetcode 题目来源&#xff1a;861. 翻转矩阵后的得分 解法1&#xff1a;贪心 对于二进制数来说&#xff0c;我们只要保证最高位是1&#xff0c;就可以保证这个数是最大的&#xff0c;因为移动操作会使得它取反&#xff0c;因此我们进行行变化的时候只需要考虑首…

【Android安全】AOSP版本对应编号| AOSP版本适配Pixel或Nexus型号 | 驱动脚本下载地址

AOSP版本对应编号 https://source.android.com/docs/setup/about/build-numbers?hlzh-cn#source-code-tags-and-builds 例如android-8.1.0_r1 对应的编号是OPM1.171019.011 可以适配Pixel 2 XL AOSP驱动脚本下载 编译AOSP时&#xff0c;需要Google的驱动&#xff0c;后面才…

C++——类与对象(下)

​ 【本节内容】 目录 1. 再谈构造函数 2. static成员 3. 友元 4. 内部类 5.匿名对象 6.拷贝对象时的一些编译器优化 7. 再次理解类和对象 1. 再谈构造函数 1.1 构造函数体赋值 在创建对象时&#xff0c;编译器通过调用构造函数&#xff0c;给对象中各个成员变量一个合…

HTML用法介绍

文章目录 一、HTML概念和模版二、常用标签及用法1.p标签2.span标签3.h标签4.hr标签5.img标签6.a标签7.input标签8.table标签 一、HTML概念和模版 HTML的全称为超文本标记语言&#xff0c;它包括一系列标签组成&#xff0c;模版及各部分注释如下&#xff1a; <!--声明文档类…

从需求角度介绍PasteSpider(K8S平替部署工具适合于任何开发语言)

你是否被K8S的强大而吸引&#xff0c;我相信一部分人是被那复杂的配置和各种专业知识而劝退&#xff0c;应该还有一部分人是因为K8S太吃资源而放手&#xff01; 这里介绍一款平替工具PasteSpider&#xff0c;PasteSpider是一款使用c#编写的linux容器部署工具(使用PasteSpider和…

如何将Windows PC变成Wi-Fi热点?这里提供详细步骤

序言 Windows 10和Windows 11都有内置功能,可以将你的笔记本电脑(或台式机)变成无线热点,允许其他设备连接到它并共享你的互联网连接。以下是操作指南。 由于Windows中隐藏的虚拟Wi-Fi适配器功能,你甚至可以在连接到另一个Wi-Fi网络或无线路由器时创建Wi-Fi热点,通过另…

CSS学习笔记之高级教程(二)

10、CSS 3D 转换 通过 CSS transform 属性&#xff0c;您可以使用以下 3D 转换方法&#xff1a; rotateX()rotateY()rotateZ() 10.1 rotateX() 方法&#xff08;使元素绕其 X 轴旋转给定角度&#xff09; <!DOCTYPE html> <html lang"en"><head&g…

NLP(17)--大模型发展(1)

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 大模型的演化&#xff1a; ElMO : 类似双向lstm 结果和词向量拼接 预训练鼻祖 GPT :使用了Transformer 模型 开始使用Token &#xff08;发现预训练的作用&#xff09; Bert&#xff1a;认为双向比单向好 MLM(双向) 优于 LT…

ARP基本原理

相关概念 ARP报文 ARP报文分为ARP请求报文和ARP应答报文&#xff0c;报文格式如图1所示。 图1 ARP报文格式 Ethernet Address of destination&#xff08;0–31&#xff09;和Ethernet Address of destination&#xff08;32–47&#xff09;分别表示Ethernet Address of dest…

Linux中解决普通用户使用不了sudo问题

目录 sudo的使用场景sudo使用不了的原因解决方法 sudo的使用场景 之前我们介绍了文件的权限问题 如果一个普通用户想去执行一个它命令之外的权限&#xff0c;只能使用sudo 比如普通用户使用yum去安装软件&#xff0c;需要sudo yum xxxx sudo使用不了的原因 这里我们用普通用户…

浏览器的下载行为基本原理

浏览器解析 在使用浏览器访问某些资源时&#xff0c;有些资源是直接下载有些资源是直接打开。例如前端的html&#xff0c;xml&#xff0c;css&#xff0c;图片等资源都是直接打开&#xff0c;而txt&#xff0c;excel等文件是直接下载。那么如何控制访问一个资源时是下载文件还…

C# run Node.js

C# run nodejs Inter-Process Communication&#xff0c;IPC Process类 启动Node.js进程&#xff0c;通过标准输入输出与其进行通信。 // n.js// 监听来自标准输入的消息 process.stdin.on(data, function (data) {// 收到消息后&#xff0c;在控制台输出并回复消息console.l…

MyBatisPlus标准分页功能制作,以及设置分页拦截器,selectPage(new Page<>(current,size),null)

目录 1、设置分页拦截器 2、创建数据库及表 3、pom.xml 4、添加MP的相关配置信息 application.yml 5、根据数据库表创建实体类 User 6、创建 UserDao 接口 7、编写引导类 8、编写测试类 9、Run的运行结果 1、设置分页拦截器 package com.example.config; import com.baomidou.m…

从零开始傅里叶变换

从零开始傅里叶变换 1 Overview2 傅里叶级数2.1 基向量2.2 三角函数系表示 f ( t ) f(t) f(t)2.2.1 三角函数系的正交性2.2.2 三角函数系的系数 2.3 复指数函数系表示 f ( t ) f(t) f(t)2.3.1 复指数函数系的系数2.3.2 复指数函数系的正交性 2.4 傅里叶级数总结 3 傅里叶变换…

基于轻量级神经网络GhostNet开发构建CIFAR100数据集场景下的图像识别分析系统,对比不同分辨路尺度下模型的性能情况

Cifar100数据集是一个经典的图像分类数据集&#xff0c;常用于计算机视觉领域的研究和算法测试。以下是关于Cifar100数据集的详细介绍&#xff1a; 数据集构成&#xff1a;Cifar100数据集包含60000张训练图像和10000张测试图像。其中&#xff0c;训练图像分为100个类别&#x…

肯尼亚大坝决堤反思:强化大坝安全监测的必要性

一、背景介绍 近日&#xff0c;肯尼亚发生了一起严重的大坝决堤事件。当地时间4月29日&#xff0c;肯尼亚内罗毕以北的一座大坝决堤&#xff0c;冲毁房屋和车辆。当地官员称&#xff0c;事故遇难人数已升至71人。这起事件再次提醒我们&#xff0c;大坝安全无小事&#xff0c;监…

SpringMVC源码解读[1] -Spring MVC 环境搭建

源码地址: https://github.com/chen-jiacheng/springmvc-quickstart 一、使用 IDEA 创建 Spring MVC 项目 直接创建项目即可 默认项目结构: springmvc-quickstart ├── pom.xml └── src├── main│ ├── java│ │ └── com│ │ └── chenjiache…

微软开发者大会:编程进入自然语言时代、“AI员工”闪亮登场

当地时间周二&#xff0c;美国科技公司微软召开年度Build开发者大会。在CEO纳德拉的带领下&#xff0c;微软各个产品团队再一次展现出惊人的执行力&#xff0c;在发布会上又拿出了接近50个新产品或功能更新。 整场发布会持续了接近两个小时&#xff0c;在这里挑选了一些投资者…

深度学习之基于YoloV5入侵检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显。入侵检测系统&#xff08;IDS&#xff0…

[图解]产品经理创新模式01物流变成信息流

1 00:00:01,570 --> 00:00:04,120 有了现状的业务序列图 2 00:00:04,960 --> 00:00:08,490 我们就来改进我们的业务序列图了 3 00:00:08,580 --> 00:00:11,010 把我们要做的系统放进去&#xff0c;改进它 4 00:00:13,470 --> 00:00:15,260 怎么改进&#xff1f;…