uniapp-商城-51-后台 商家信息（logo处理）

        前面对页面基本进行了梳理和说明，特别是对验证规则进行了阐述，并对自定义规则的兼容性进行了特别补充，应该说是干货满满。不知道有没有小伙伴已经消化了。

        下面我们继续前进，说说页面上的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);
			}

主要方法还需要仔细分析和说明。