图片上传---uniapp公众号项目uni-file-picker组件+uni.uploadFile方法

最新推荐文章于 2025-03-31 19:59:09 发布

00秃头小宝贝

最新推荐文章于 2025-03-31 19:59:09 发布

阅读量1.2k

点赞数 1

文章标签： uni-app 数据库服务器

本文链接：https://blog.csdn.net/m0_72929120/article/details/131659708

版权

1.使用u-select文件上传

<uni-section title="">
							<view class="example-body">
								<uni-file-picker limit="3" title="最多选择3张图片" @select="select($event)"
									@delete="pickerDelete($event)"></uni-file-picker>
							</view>
						</uni-section>

2.准备数据

activeFormData: {
					pics: [], //用户上传的图片（最多五张）
				},
file: '',
				ImageUrl: '',

3.选择图片和上传图片--uni.uploadFile，上传成功会提示

//选择图片
			select(e) {
				console.log(e, 'eee')
				e.tempFilePaths.map(item => {
					this.file = item
					console.log(this.file, '11111')
				})
				let data;
				const a = uni.uploadFile({
					url: 'http://ck.kml169.com/community_api/Upload/upload', //仅为示例，非真实的接口地址
					filePath: this.file,
					name: 'file',
					header: {
						'access-token': uni.getStorageSync('token')
					},

					success: (res) => {
						console.log(res.data, 88888);
						// 后端返回的是json String类型的数据，必须转换成json对象
						data = JSON.parse(res.data)

						console.log(data, '1111')
						// console.log(data.data.url, 88888);
						// 这个地方我真傻，字段名和data中定义的字段不一致
						this.ImageUrl = data.data.url
						this.activeFormData.pics.push(this.ImageUrl)
						console.log(this.activeFormData.pics, '0000')
						uni.showToast({
							title: '上传成功',
							icon: 'none',
							duration: 2000
						})
					},

				});
				console.log(data, '000')
			},

4.删除图片成功后会提示

pickerDelete(e) {
				this.activeFormData.pics.map((item, i) => {
					this.activeFormData.pics.splice(i, 1)
				})
				uni.showToast({
					title: '删除成功',
					icon: 'none',
					duration: 2000
				})
				console.log(this.activeFormData.pics, '33333')
			},