ant-design-vue如何限制圖片上傳的尺寸?

    handleBeforeUpload(file, fileList) {// fileList 只包含了當次上傳的文件列表,不包含已上傳的文件列表// 所以長度要加上已上傳的文件列表的長度const isLimit = this.fileList.length + fileList.length > this.limit;const indexOfFile = fileList.findIndex(item => item.uid === file.uid) + this.fileList.length;if (isLimit && indexOfFile === this.limit) {file.status = 'beforeUploadReject';file.statusText = '最多上傳' + this.limit + '張圖片';return false;}if (isLimit && indexOfFile > this.limit) {file.status = 'beforeUploadReject';return false;}const isJpgOrPng = file.type.startsWith('image/');if (!isJpgOrPng) {file.status = 'beforeUploadReject';file.statusText = '請上傳圖片';return false;}const isLtmb = file.size / 1024 / 1024 < this.isLtMB;if (!isLtmb) {file.status = 'beforeUploadReject';file.statusText = `圖片不能大于${this.isLtMB}mb`;return false;}let self = this;if (this.limitHeight && this.limitWidth) {return new Promise((resolve, reject) => {// 圖片寬高比例限制let w = 0,h = 0;let reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {const image = new Image();image.src = reader.result;image.onload = () => {w = image.width;h = image.height;if (w > self.limitWidth || h > self.limitHeight) {self.$message.error('圖片尺寸超過限制,請重新上傳');return reject(false);} else {return resolve(true);}};};});}},

異步操作要用promise返回true或者false

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/713334.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/713334.shtml
英文地址,請注明出處:http://en.pswp.cn/news/713334.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

C++ STL 之容器 vector 常見用法

一. 什么是vector vector為“變長數組”&#xff0c;即長度根據需要而自動改變的數組。 頭文件&#xff1a; #include <vector>using namespace std;單獨定義一個vector&#xff1a;vector<typename> name&#xff0c;相當于一維數組 name[SIZE] &#xff0c;其長…

mac-docker-php容器連接mac中的pgsql數據庫失敗以及出現table_msg存錯誤時的解決方法

以php中的thinkphp 5.1為例&#xff0c;php容器連接mac中的pgsql數據庫失敗時&#xff0c;出現如下錯誤 [7] PDOException in Connection.php line 528 SQLSTATE[08006] [7] could not connect to server: Connection refused Is the server running on host "localhost&…

Git 配置處理客戶端無法正常訪問到 github 原網站時,npm 下載依賴包失敗的問題

Git 配置處理客戶端無法正常訪問到 github 原網站時&#xff0c;npm 下載依賴包失敗的問題 使用 github 的鏡像網站地址或類似的替代產品地址&#xff0c;代替到 npm 拉取依賴包的 git 地址本地Git配置 例如&#xff1a;執行一下命令&#xff0c;則是以https://kgithub.com 替…

requests庫/urllib3庫返回WEB響應內容的處理差異

requests庫是一個廣泛使用的HTTP庫&#xff0c;用于發送HTTP請求和處理響應。 以下是requests庫中一些主要類和方法的詳細介紹&#xff1a;requests庫主要類和方法 類:requests.models.Response: status_code: 響應狀態碼。text: 以Unicode形式返回響應內容。content: 以字節形…

MySQL的主從同步原理

MySQL的主從同步&#xff08;也稱為復制&#xff09;是一種數據同步技術&#xff0c;用于將一個MySQL服務器&#xff08;主服務器&#xff09;上的數據和變更實時復制到另一個或多個MySQL服務器&#xff08;從服務器&#xff09;。這項技術支持數據備份、讀寫分離、故障恢復等多…

帝國cms7.5仿非小號區塊鏈門戶資訊網站源碼 帶手機版

帝國cms7.5仿非小號區塊鏈門戶資訊網站源碼 帶手機版 帶自動采集 開發環境&#xff1a;帝國cms 7.5 安裝環境&#xff1a;phpmysql 包含火車頭采集規則和模塊&#xff0c;采集目標站非小號官網。 專業的數字貨幣大數據平臺模板&#xff0c;采用帝國cms7.5內核仿制&#xff0…

LeetCode_22_中等_括號生成

文章目錄 1. 題目2. 思路及代碼實現&#xff08;Python&#xff09;2.1 暴力法2.2 回溯法 1. 題目 數字 n n n 代表生成括號的對數&#xff0c;請你設計一個函數&#xff0c;用于能夠生成所有可能的并且 有效的 括號組合。 示例 1&#xff1a; 輸入&#xff1a; n 3 n 3 …

Ai-WB2-32S在window下使用vs 和 msys2編譯以及燒錄

文章目錄 前言一、使用前準備第一步 安裝vscode第二步 安裝msys2 二、使用步驟1.打開MSYS2 MINGW64&#xff08;1&#xff09;在開始欄中找到MSYS2 MINGW64并打開&#xff08;2&#xff09;安裝git&#xff08;3&#xff09;安裝make&#xff08;4&#xff09;安裝好之后的文件…

前端面試練習24.3.1

一.進程和線程的區別 進程&#xff1a;是程序的一次執行過程,擁有獨立的內存空間 線程&#xff1a;是進程中的一個執行單元,共享所屬進程的內存空間和系統資源 進程&#xff08;Process&#xff09;和線程&#xff08;Thread&#xff09;是操作系統中的重要概念&#xff0c;它…

Redis 之五:Redis 的主從復制

概念 主從復制&#xff0c;是指將一臺 Redis 服務器的數據&#xff0c;復制到其他的Redis服務器。前者稱為主節點(master)&#xff0c;后者稱為從節點(slave)&#xff1b;數據的復制是單向的&#xff0c;只能由主節點到從節點。 默認情況下&#xff0c;每臺Redis服務器都是主節…

【0272】postgres內核分配 MyBackendId 實現原理(MyBackendId、MyProc、shmInvalBuffer)(三)

相關文章: 【0255】揭曉pg內核中MyBackendId的分配機制(后端進程Id,BackendId)(一) 【0256】揭曉pg內核中MyBackendId的分配機制(后端進程Id,BackendId)(二) 第一個backend process前,shmInvalBuffer的值情況 (gdb) p *shmInvalBuffer $153 = {minMsgNum =

webpack-cli

webpack-cli做了什么 webpack-cli 是 Webpack 提供的命令行工具&#xff0c;用于在命令行中執行 Webpack 相關的操作。webpack-cli 主要完成以下幾項工作&#xff1a; 解析和處理命令行參數&#xff1a;webpack-cli 負責解析用戶在命令行中輸入的參數&#xff0c;包括配置文件…

云天勵飛戰略投資神州云海,布局機器人市場

日前,AI上市企業云天勵飛(688343.SH)完成了對深圳市神州云海智能科技有限公司(以下簡稱“神州云海”)的B輪戰略投資。 公開資料顯示,自2015年于深圳創立以來,神州云海始終聚焦人工智能與服務機器人廣闊的應用市場,依托自主的核心算法能力,深耕機器人硬件本體研發,整合上下游產…

Java學習筆記001——入門基礎知識

Java語言是一種高級編程語言&#xff0c;它采用了面向對象編程的思想&#xff0c;具有跨平臺性和安全性等優點。現如今&#xff0c;Java語言成為了世界上最流行的編程語言之一。 前一段學習Python語言&#xff0c;本文是學習java的第一篇筆記。 1. java運行環境搭建&#xff…

RabbitMQ-TTL/死信隊列/延遲隊列高級特性

文章目錄 TTL死信隊列消息成為死信的三種情況隊列如何綁定死信交換機 延遲隊列RabbitMQ如何實現延遲隊列 總結來源B站黑馬程序員 TTL TTLTTL(Time To Live):存活時間/過期時間當信息到達存活時間后&#xff0c;還沒有被消費&#xff0c;會被自動清除。RabbitMQ可以對消息設置過…

Win10系統如何重置系統

Win10系統如何重置 大家可以使用Win10內建的重設電腦設定&#xff0c;如以下操作&#xff1a; 首先&#xff0c;可以先到桌面左下角的【開始】 選擇【設定】 在【設定】裡找到【更新與安全性】 在左側欄有一項【復原】 在復原的標題下&#xff0c;副標題有一項【重設此電腦】…

【algorithm】算法基礎課---排序算法(附筆記 | 建議收藏)

&#x1f680;write in front&#x1f680; &#x1f4dd;個人主頁&#xff1a;認真寫博客的夏目淺石. &#x1f381;歡迎各位→點贊&#x1f44d; 收藏?? 留言&#x1f4dd; &#x1f4e3;系列專欄&#xff1a;AcWing算法學習筆記 &#x1f4ac;總結&#xff1a;希望你看完…

tvm交叉編譯參考資料整理

環境 ubuntu20.04&#xff0c;ndk交叉編譯部署到adnroid手機 參考&#xff1a; TVM部署神經網絡模型到android端_tvm android-CSDN博客 使用TVM在android中進行Mobilenet SSD部署 - 知乎

深度探析低代碼:助力“數智轉型”賦能中國制造

隨著數字化和智能化技術的飛速發展&#xff0c;我國制造業正面臨著從傳統制造向智能制造的轉型升級。在這個過程中&#xff0c;低代碼技術作為一種創新性的軟件開發模式&#xff0c;逐漸成為助力我國制造業數智轉型的關鍵驅動力。本文將從低代碼技術的原理、應用場景以及在我國…

?The Sandbox的南極之旅|鏈接世界:從南極洲到元宇宙

真正的發現之旅不在于尋找新的景觀&#xff0c;而在于擁有新的眼光。 - 馬塞爾-普魯斯特 在這個數字世界和物理世界日益交織的時代&#xff0c;The Sandbox 的聯合創始人 Arthur Madrid 和 Sebastien Borget 踏上了遠離數字空間的旅程&#xff0c;前往地球上未被開發的寶藏地點…