微信小程序上传文件【uni-file-picker组件】

不必回头

633人浏览 · 2025-12-17 16:41:30

不必回头 · 2025-12-17 16:41:30 发布

uni-file-picker上传文件（若依移动端）

一、介绍
二、代码
- 引入JS
- vue代码

一、介绍

日常吐槽又开始了，本来干着后端，敲点pc也还行，结果现在又让俺写点小程序，他真的，我哭死

这不使用了若依的移动端项目，想找代码进行cv的，然后发现都是模块建设中，只能引入了uview-ui组件，使用uni-file-picker组件进行开发，能方便一点是一点

二、代码

uniapp==》uni-file-picker组件地址：https://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html

引入JS

若依在utils文件下集成了一个上传的utils/upload.js（可能有些没有使用若依，这里贴一个gitee地址，防止若依进行更新发版代码，直接进去复制也行，反正就一个方法https://gitee.com/y_project/RuoYi-App/blob/master/utils/upload.js）

然后还需要定义一个上传接口，就是调用后台上传图片使用得
我就在api/system文件下进行写了
（vue文件import { uploadFile } from '@/api/system/upload.js'引入的就是下面这个）
我后台这边使用fileCategory进行组装判断存储路径，所以自定义上传了，不需要也可以进行忽略
具体使用可以参考这篇文章：https://blog.csdn.net/weixin_45853881/article/details/135871088

import upload from '@/utils/upload.js'

export function uploadFile(filePath, fileCategory) {
	return upload({
		url: '/common/upload',
		method: 'post',
		formData: {
			fileCategory: fileCategory,
		},
		filePath: filePath
	})
}

vue代码

vue代码：我这里使用limit进行限制了个数（直接上图:我这里把代码精简了许多），这里直接新建一个vue文件复制进去就可以查看

<template>
	<view class="company-form-container">

		<!-- 页面主体 -->
		<view class="form-wrapper">

			<!-- 企业名称 -->
			<view class="form-item form-item-input">
				<text class="form-label">企业名称</text>
				<view class="form-control">
					<u-textarea v-model="form.companyName" placeholder="请填写企业名称" autoHeight></u-textarea>
				</view>
			</view>

			<!-- 营业执照 -->
			<view class="form-item form-item-file">
				<text class="form-label">营业执照</text>
				<view class="form-control">
					<uni-file-picker v-model="qyYyzzUrl" fileMediatype="image" limit="1" @select="selectYyzz"
						@delete="deleteYyzz" />
				</view>
			</view>

			<!-- 许可证 -->
			<view class="form-item form-item-file">
				<text class="form-label">许可证</text>
				<view class="form-control">
					<uni-file-picker v-model="qyXkzUrl" fileMediatype="image" @select="selectXkz" @delete="deleteXkz" />
				</view>
			</view>

		</view>

		<!-- 保存按钮 -->
		<view class="form-submit fixed-submit">
			<u-button type="primary" text="保存" @click="submit()" class="submit-btn"></u-button>
		</view>

	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/api/system/upload.js'
	import {
		getCompany,
		addCompany,
		updateCompany
	} from "@/api/system/company";
	export default {
		data() {
			return {
				form: {},
				qyYyzzId: [],
				qyYyzzUrl: [],
				qyXkzId: [],
				qyXkzUrl: [],
			}
		},
		onLoad(options) {
			this.reset();
			if (options && options.companyId) {
				this.form.companyId = options.companyId;
				this.getInfo()
			}
		},
		methods: {
			// 编辑页面加载数据
			getInfo() {
				getCompany(this.form.companyId).then(response => {
					if (response.data.qyYyzzId) {
						this.qyYyzzId = response.data.qyYyzzId.split(',').filter(item => item).map(Number);
						response.data.qyYyzzFile.forEach(file => {
							file.id = file.fileId
							file.name = file.fileName
							file.extname = ''
						})
						this.qyYyzzUrl = response.data.qyYyzzFile
					}
					if (response.data.qyXkzId) {
						this.qyXkzId = response.data.qyXkzId.split(',').filter(item => item).map(Number);
						response.data.qyXkzFile.forEach(file => {
							file.id = file.fileId
							file.name = file.fileName
							file.extname = ''
						})
						this.qyXkzUrl = response.data.qyXkzFile
					}
				})
			},
			/// 上传图片-----------------------------开始
			// 选择文件 ---营业执照
			selectYyzz(e) {
				uploadFile(e.tempFilePaths[0], 'company/yyzz').then(res => {
					let fp = {}
					fp.name = res.data.name
					fp.extname = ''
					fp.url = res.data.url
					this.qyYyzzUrl.push(fp)
					this.qyYyzzId.push(res.data.id);
					this.$modal.msg("营业执照上传成功");
					this.form.qyYyzzId = this.qyYyzzId.join(',')
				});
			},
			// 文件移除
			deleteYyzz(e) {
				const findex = e.index
				if (findex > -1) {
					this.qyYyzzId.splice(findex, 1);
					this.form.qyYyzzId = this.qyYyzzId.join(',')
				}
			},
			// 选择文件 ---许可证
			selectXkz(e) {
				uploadFile(e.tempFilePaths[0], 'company/xkz').then(res => {
					let fp = {}
					fp.name = res.data.name
					fp.extname = ''
					fp.url = res.data.url
					this.qyXkzUrl.push(fp)
					this.qyXkzId.push(res.data.id);
					this.$modal.msg("许可证上传成功");
					this.form.qyXkzId = this.qyXkzId.join(',')
				});
			},
			// 文件移除
			deleteXkz(e) {
				const findex = e.index
				if (findex > -1) {
					this.qyXkzId.splice(findex, 1);
					this.form.qyXkzId = this.qyXkzId.join(',')
				}
			},
			/// 上传图片-----------------------------结束
			// 表单重置
			reset() {
				this.qyYyzzId = []
				this.qyYyzzUrl = []
				this.qyXkzId = []
				this.qyXkzUrl = []
				this.form = {
					companyId: null,
					companyName: null,
					qyYyzzId: null,
					qyXkzId: null,
				};
			},
			// 保存数据
			submit() {
				//  判断新增修改
				if (this.form.companyId != null) {
					this.$modal.confirm('确定修改吗？').then(() => {
						updateCompany(this.form).then(response => {
							this.$tab.navigateBack().then(() => {
								this.$modal.msgSuccess("修改成功");
							})
						});
					})
				} else {
					addCompany(this.form).then(response => {
						this.$tab.navigateBack().then(() => {
							this.$modal.msgSuccess("添加成功");
						})
					});
				}
				// 获取当前所有已加载的页面栈（数组形式）
				const pages = getCurrentPages();
				// 从页面栈中获取「上级页面实例」（数组倒数第二个元素 = 上一级页）
				const prevPage = pages[pages.length - 2];
				// 兼容分包页面：获取上级页真实的Vue实例（分包页方法挂载在$vm上）
				const prevVm = prevPage.$vm || prevPage;
				// 确保上级Vue实例存在
				if (prevVm) {
					// 调用上级页的getList方法，并强制绑定this指向（这里根据需要进行调用方法）
					prevVm.getList.call(prevVm);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 全局容器：页面基础背景+最小高度占满屏幕
	.company-form-container {
		background-color: #fff;
		min-height: 100vh;
	}

	// 表单外层容器：上下内边距，避免内容贴边/被按钮遮挡
	.form-wrapper {
		padding: 30rpx 30rpx 120rpx; // 左右30rpx，底部留空给固定按钮
	}

	// 通用表单项样式：每个表单项的基础布局
	.form-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx; // 表单项之间的间距

		&.form-item-file {
			margin-top: 20rpx; // 文件上传项额外顶部间距
		}
	}

	// 表单标签样式：企业名称/营业执照/许可证标签
	.form-label {
		font-weight: 600;
		font-size: 32rpx;
		color: #333;
		margin-bottom: 10rpx; // 标签与输入框/上传组件的间距
	}

	// 表单控件容器：输入框/文件上传的外层容器
	.form-control {
		width: 100%;

		// 适配uni-file-picker文件上传组件样式
		/deep/ .uni-file-picker {
			width: 100%;

			// 上传按钮样式
			.uni-file-picker__input {
				width: 120rpx;
				height: 120rpx;
				border: 1px dashed #dcdfe6;
				border-radius: 8rpx;
				background-color: #f8f9fa;
				display: flex;
				align-items: center;
				justify-content: center;

				&:hover {
					border-color: #2979ff; // hover高亮
				}

				.uni-file-picker__input-icon {
					font-size: 40rpx;
					color: #909399;
				}

				.uni-file-picker__input-text {
					font-size: 24rpx;
					color: #909399;
					margin-top: 8rpx;
				}
			}

			// 已上传文件列表样式
			.uni-file-picker__files {
				display: flex;
				flex-wrap: wrap;
				gap: 15rpx; // 文件之间的间距
				margin-top: 10rpx;

				.uni-file-picker__file {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					overflow: hidden;
					position: relative;

					// 预览图片
					.uni-file-picker__file-image {
						width: 100%;
						height: 100%;
						object-fit: cover; // 图片等比填充
					}

					// 删除按钮
					.uni-file-picker__file-delete {
						position: absolute;
						top: -8rpx;
						right: -8rpx;
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						background-color: #ff4949;
						color: #fff;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						&:hover {
							background-color: #ff7875;
						}
					}
				}
			}

			// 上传提示文字
			.uni-file-picker__tips {
				font-size: 22rpx;
				color: #909399;
				margin-top: 10rpx;
			}
		}
	}

	// 提交按钮容器：固定在底部
	.form-submit {
		&.fixed-submit {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			padding: 15rpx 30rpx 25rpx; // 左右内边距，上下间距
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); // 底部阴影，区分内容
			z-index: 99; // 保证在最上层
		}

		// 保存按钮样式
		.submit-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			border-radius: 8rpx; // 按钮圆角
		}
	}

	// 小屏移动端适配（如iPhone SE/小屏安卓）
	@media (max-width: 750rpx) {
		.form-label {
			font-size: 30rpx; // 标签字号缩小
		}

		/deep/ .uni-file-picker {
			.uni-file-picker__input,
			.uni-file-picker__file {
				width: 100rpx;
				height: 100rpx; // 上传按钮/预览图缩小
			}

			.uni-file-picker__input-icon {
				font-size: 36rpx;
			}

			.uni-file-picker__input-text {
				font-size: 22rpx;
			}
		}

		.submit-btn {
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx; // 按钮高度适配
		}
	}
</style>