基于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.pswp.cn/diannao/13995.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/13995.shtml
英文地址，請注明出處：http://en.pswp.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