前面对页面基本进行了梳理和说明，特别是对验证规则进行了阐述，并对自定义规则的兼容性进行了特别补充，应该说是干货满满。不知道有没有小伙伴已经消化了。
下面我们继续前进，说说页面上的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);
}主要方法还需要仔细分析和说明。
