????????前面對頁面基本進行了梳理和說明，特別是對驗證規則進行了闡述，并對自定義規則的兼容性進行了特別補充，應該說是干貨滿滿。不知道有沒有小伙伴已經消化了。

????????下面我們繼續前進，說說頁面上的logo上傳組件，主要就是uni-file-picker。

????????本文介紹了在uni-app中使用uni-file-picker組件實現logo上傳功能的方法。首先，logo上傳本質上是一個圖片文件的上傳，通過在表單中增加uni-file-picker組件即可實現。主要代碼示例展示了如何在uni-forms-item標簽下嵌入uni-file-picker組件，并設置相關屬性如文件類型、上傳模式及數量限制。此外，文章還提供了uni-file-picker組件的官方文檔和下載安裝地址，方便開發者獲取詳細的使用說明和集成到項目中。通過這種方式，開發者可以輕松實現文件選擇與上傳功能，適用于品牌招牌等圖片上傳場景。

1、logo上傳說明

logo其實就是一個文件，一個圖片。

這樣就是在from表單中的標簽下，增加一個上傳組件就好了，uni-file-picker。

2、主要代碼截圖

??????? 在標簽下?uni-forms-item，放一個上傳的組件：

<uni-forms-item label="品牌招牌" required name="thumb"><uni-file-picker v-model="brandFormData.thumb" fileMediatype="image" mode="grid" :limit="1" />
</uni-forms-item>

3、需安裝該組件

方法如下：

uni-file-picker

uni-app官網uni-app,uniCloud,serverless,介紹,基礎用法,選擇指定后綴圖片，且限制選擇個數,手動上傳,單選圖片且點擊再次選擇,自定義樣式,使用插槽,API,FilePicker Props,value 格式,list-styles 格式,image-styles 格式,FilePickhttps://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html????????在官網上可以進行下載和找到相應的使用方法。上面是uniapp的說明，下面是該組件的下載安裝地址，直接安裝到需要的項目，合并到自己的代碼。

uni-file-picker 文件選擇上傳 - DCloud 插件市場 文件選擇上傳組件，可以選擇圖片、視頻等任意文件并上傳到當前綁定的服務空間https://ext.dcloud.net.cn/plugin?name=uni-file-picker




?

?4、上傳的數據的處理

4.1 頁面處理和數據定義

			<uni-forms-item label="品牌招牌" required name="thumb"><uni-file-picker v-model="brandFormData.thumb" fileMediatype="image" mode="grid" :limit="1" /><!-- v-model="brandFormData.thumb"   雙向綁定 所里略圖  這里默認是一個數組 下面定義data 就一個數組fileMediatype  文件類型是圖像mode  文件呈現的樣式 要不是list 列表 要不是九宮格的grid 上面是三個基本的屬性limit 限制傳幾個文件  一般logo就一張。--></uni-forms-item>brandFormData: {thumb: [],   //數組name: "", //品牌名稱mobile: "",address: "",about: ""},

4.2 數據上傳時的處理

一般該組件uni-file-picker 會有很多數據全部給后臺使用。我們只需要使用很少的屬性數據。

如圖片：

只是需要圖片的url，name，大小，類型格式等等，否則太多垃圾數據占用后臺數據庫

所以我們在提交時需要做如下的處理：

			//點擊提交按鈕onSubmit() {this.$refs.brandRef.validate().then(res => {let arr = this.brandFormData.thumb.map(item => {return {extname: item.extname,url: item.url,name: item.name,size: item.size}})this.brandFormData.thumb = arr;this.addAndUpdate();}).catch(err => {// console.log(err);})},

4.3 數據上傳

主要代碼：

			//新增或者修改品牌啊信息async addAndUpdate() {let title;if (this.brandFormData._id) {let res = await brandCloudObj.update(this.brandFormData)title = "修改成功"} else {//新增await brandCloudObj.add(this.brandFormData)title = "新增成功"}uni.showToast({title,mask: true})setTimeout(() => {uni.navigateBack();}, 1500)this.SET_BRAND(this.brandFormData);}

主要方法還需要仔細分析和說明。