当前位置：首页 > news >正文

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

news 来源：原创 2025/5/11 5:47:33

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

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

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