xe-upload上傳文件插件

1.xe-upload地址:文件選擇、文件上傳組件(圖片,視頻,文件等) - DCloud 插件市場

2.由于開發app要用到上傳文件組件,uni.chooseFile在app上不兼容,所以找到了xe-upload,兼容性很強,強烈推薦!!!

說明

不占用頁面位置的上傳組件;

H5、App、微信小程序中可上傳圖片,視頻和文件;其他端暫時只能上傳圖片和視頻

上傳圖片通過chooseMedia及chooseImage實現

上傳視頻通過chooseMedia及chooseVideo實現

H5端上傳文件通過chooseFile實現

App上傳文件通過renderjs實現

微信小程序上傳文件通過chooseMessageFile實現

3.使用方法,到插件市場將插件包導入到自己的項目,然后下列方式調用。

<!-- 也可以下載示例項目查看使用方法 -->
<template><view><button @click="handleUploadClick">上傳</button><xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload></view>
</template><script>
export default {data() {return {uploadOptions: {// url: 'http://192.168.31.185:3000/api/upload', // 不傳入上傳地址則返回本地鏈接},};},methods: {handleUploadClick() {// 使用默認配置則不需要傳入第二個參數// type: ['image', 'video', 'file'];this.$refs.XeUpload.upload('file', {});// this.$refs.XeUpload.upload('image', {//  count: 6,//  sizeType: ['original', 'compressed'],//  sourceType: ['album'],// });},handleUploadCallback(e) {// e.type: ['choose', 'success', 'warning']// choose 是options沒有傳入url,返回臨時鏈接時觸發// success 是上傳成功返回對應的數據時觸發// warning 上傳或者選擇文件失敗觸發// ......},},
};
</script>

?4.回調綁定callback方法:

回調返回的參數:

'callback.type === success' : [{"size": 176579, // 選擇的文件的大小"name": "Kafka.pdf", // 選擇的文件的名稱(小程序端可能會沒有)"type": "application/pdf","tempFilePath": "_doc/uniapp_temp/Kafka-16988473328760.pdf", // 臨時路徑"fileType": "file", // 文件類型[image, video, file]"response": {"result": {"fileName": "Kafka.pdf","filePath": `http://localhost:3000/upload/e51d814b649122fc64892d0bc6383d07.pdf`,},"success": true,}, // 上傳返回的信息}
]'callback.type === choose' : [{"size": 176579, // 選擇的文件的大小"name": "Kafka.pdf", // 選擇的文件的名稱(小程序端可能會沒有)"type": "application/pdf","tempFilePath": "_doc/uniapp_temp/Kafka-16988473328760.pdf", // 文件臨時路徑"fileType": "file", // 文件類型[image, video, file]}
]

5.注意事項

1、options入參中如果url為空,則choose回調的data列表中只有選擇文件能得到的信息和臨時路徑,臨時路徑可用于自定義上傳方法;傳入url選擇文件后會自動上傳到服務器,此時choose回調不會觸發,而是執行success回調,success回調的data列表會包括選擇文件能得到的信息
2、當uni.chooseMedia可用時,會優先使用uni.chooseMedia
3、具體使用可下載示例項目運行查看完整示例

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

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

相關文章

Golang|外觀模式和具體邏輯

最終返回的是Document的切片&#xff0c;然后取得Bytes自己再去做反序列化拿到文檔的各種詳細信息。 外觀模式是一種結構型設計模式&#xff0c;它的目的是為復雜的子系統提供一個統一的高層接口&#xff0c;讓外部調用者&#xff08;客戶端&#xff09;可以更簡單地使用子系統…

2025年3月AGI技術月評|技術突破重構數字世界底層邏輯

〔更多精彩AI內容&#xff0c;盡在 「魔方AI空間」 &#xff0c;引領AIGC科技時代〕 本文作者&#xff1a;貓先生 ——當「無限照片」遇上「可控試穿」&#xff0c;我們正在見證怎樣的智能革命&#xff1f; 被低估的進化&#xff1a;開源力量改寫游戲規則 當巨頭們在AGI賽道…

可解釋人工智能(XAI):讓機器決策透明化

在人工智能&#xff08;AI&#xff09;技術飛速發展的今天&#xff0c;AI 系統已經廣泛應用于金融、醫療、交通等多個關鍵領域。然而&#xff0c;隨著 AI 系統的復雜性不斷增加&#xff0c;尤其是深度學習模型的廣泛應用&#xff0c;AI 的“黑箱”問題逐漸凸顯。AI 系統的決策過…

【Go語言】ORM(對象關系映射)庫

github.com/jinzhu/gorm 是 Go 語言中一個非常流行的 ORM&#xff08;對象關系映射&#xff09;庫&#xff0c;用于簡化與關系型數據庫的交互。以下是關于它的關鍵信息&#xff1a; 核心特點 全功能 ORM 支持主流數據庫&#xff1a;MySQL、PostgreSQL、SQLite、SQL Server 等。…

大數據企業實驗室管理的痛點 質檢LIMS系統在大數據企業的應用

在數字化轉型浪潮中&#xff0c;大數據企業正面臨海量數據管理與質量控制的雙重挑戰。實驗室作為數據生產的核心環節&#xff0c;其檢測流程的規范化、數據處理的智能化直接關系到企業數據資產的可靠性。質檢LIMS&#xff08;實驗室信息管理系統&#xff09;通過整合實驗室資源…

在Arduino U8g2庫中顯示中文的方法

U8g2庫支持中文顯示&#xff0c;但需要手動添加中文字體或使用內置的有限中文字符。以下是具體實現方法&#xff1a; 方法一 使用U8g2內置的中文字體&#xff08;不推薦&#xff09; 缺點&#xff1a;內置字體支持的漢字較少&#xff0c;可能無法顯示所有需要的字符。不推薦。…

自動駕駛分級

一、美國 SAE J3016 Taxonomy and Definitions for Terms Related to Driving Automation Systems for On-Road Motor Vehicles(2021) 1、駕駛自動化級別&#xff08;Levels of Driving Automation&#xff09; 共分為 6 個級別&#xff0c;從 無自動化&#xff08;0&#…

工業園區工廠企業數字IP廣播應急呼叫對講系統:數字IP廣播極大提升工廠企業管理效率與應急響應效能

工業園區工廠企業數字IP廣播應急呼叫對講系統:數字IP廣播極大提升工廠企業管理效率與應急響應效能 北京海特偉業科技有限公司任洪卓發布于2025年4月28日 在數字化轉型浪潮下&#xff0c;IP應急廣播呼叫對講廣播系統憑借其網絡化、智能化、融合化、多元化等優勢&#xff0c;已…

DNS主從同步及解析

DNS 域名解析原理 域名系統的層次結構 &#xff1a;DNS 采用分層樹狀結構&#xff0c;頂級域名&#xff08;如.com、.org、.net 等&#xff09;位于頂層&#xff0c;下面是二級域名、三級域名等。例如&#xff0c;在域名 “www.example.com” 中&#xff0c;“com” 是頂級域名…

再看 BBR 到 BBRv3 的公平性改進

從看一篇論文開始&#xff1a;Performance Evaluation of TCP BBRv3 in Networks with Multiple Round Trip Times&#xff0c;結論比較悲觀&#xff1a; 雖然 BBRv2/3 試圖解決 BBRv1 的公平性問題&#xff0c;但結果依舊不夠理想&#xff0c;BBR 的迭代依舊任重而道遠。 BB…

locust壓力測試

安裝 pip install locust驗證是否安裝成功 locust -V使用 網上的教程基本上是前幾年的&#xff0c;locust已經更新了好幾個版本&#xff0c;有點過時了&#xff0c;在此做一個總結 啟動 默認是使用瀏覽器進行設置的 # 使用瀏覽器 locust -f .\main.py其他參數 Usage: locust […

優先隊列和單調隊列(雙端隊列實現的)

這里寫自定義目錄標題 一、優先隊列與單調隊列二、優先隊列2.1 概念2.2 增刪查 判空2.3 示例代碼 三、雙端隊列四、單調隊列4.1 單調遞增隊列4.2 單調遞減隊列 一、優先隊列與單調隊列 二、優先隊列 2.1 概念 一種特殊的隊列&#xff0c;它與普通隊列的主要區別在于元素的出…

如何在idea中寫spark程序

在 IntelliJ IDEA 中編寫 Spark 程序是一個高效且便捷的方式&#xff0c;以下是一個詳細的步驟指南&#xff0c;幫助你在 IntelliJ IDEA 中創建和運行 Spark 程序。 一、環境準備 安裝 Java&#xff1a; 確保已經安裝了 JDK 1.8 或更高版本。可以通過以下命令檢查&#xff1a;…

BERT BERT

BERT ***** 2020年3月11日更新&#xff1a;更小的BERT模型 ***** 這是在《深閱讀的學生學得更好&#xff1a;預訓練緊湊模型的重要性》&#xff08;arXiv:1908.08962&#xff09;中提到的24種較小規模的英文未分詞BERT模型的發布。 我們已經證明&#xff0c;標準的BERT架構和…

SpringBoot啟動警告:OpenJDK 64-Bit Server VM warning

問題描述 以Debug模式啟動Spring boot項目之后&#xff0c;日志打印&#xff1a;OpenJDK 64-Bit Server VM warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended&#xff0c; 警告信息 解決方案&#xff1a;配置VM opt…

“該虛擬機似乎正在使用中“

當某一天打開虛擬機突然彈出"該虛擬機似乎正在使用中"。 遇到這種問題的解決方法很簡單&#xff0c;出現這種問題是因為錯誤關閉虛擬機導致&#xff0c;當我們點擊獲取所有權時發現不能解決問題。這里分享一種簡單的解決方法。 打開虛擬機的文件目錄 找到lck文件夾下…

【CSS】層疊,優先級與繼承(三):超詳細繼承知識點

目錄 繼承一、什么是繼承&#xff1f;2.1 祖先元素2.2 默認繼承/默認不繼承 二、可繼承屬性2.1 字體相關屬性2.2 文本相關屬性2.3 列表相關屬性 三、不可繼承屬性3.1 盒模型相關屬性3.2 背景相關屬性 四、屬性初始值4.1 根元素4.2 屬性的初始值4.3 得出結論 五、強制繼承5.1 in…

Android LiveData關鍵代碼

1、observer方法 public void observe(NonNull LifecycleOwner owner, NonNull Observer<? super T> observer) {assertMainThread("observe");if (owner.getLifecycle().getCurrentState() DESTROYED) {// ignorereturn;}LifecycleBoundObserver wrapper …

Docker-高級使用

前言 書接上文Docker-初級安裝及使用_用docker安裝doccano-CSDN博客&#xff0c;我們講解了Docker的基本操作&#xff0c;下面我們講解的是高級使用&#xff0c;請大家做好準備&#xff01; 大家如果是從初級安裝使用過來的話&#xff0c;建議把之前鏡像和搭載的容器數據卷里面…

Spring Boot常用注解詳解:實例與核心概念

Spring Boot常用注解詳解&#xff1a;實例與核心概念 前言 Spring Boot作為Java領域最受歡迎的快速開發框架&#xff0c;其核心特性之一是通過注解&#xff08;Annotation&#xff09;簡化配置&#xff0c;提高開發效率。注解驅動開發模式讓開發者告別繁瑣的XML配置&#xff…