前端学习uniapp之上传图片功能

本文介绍了使用uniapp实现图片上传功能的方法。通过uni.chooseImage选取图片,并利用uni.uploadFile完成图片上传过程。文章详细解释了两个API的参数及用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言:

记录自己的开发过程中使用uniapp上传图片功能

内容:

uniapp简单来说上传图片功能分为两步:

  1. uni.chooseImage
  2. uni.uploadFile

博主我啊,只是记录如何使用,原理就不就展开说了可以去uniapp官网查看


uni.chooseImage:

作用:选择图片

			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					console.log(res.tempFilePaths,'图片的本地文件路径列表');
				}
			});

参数解读:count----图片张数、sizeType----original 原图,compressed 压缩图、sourceType----设置图片从那哪儿去,是相册还拍照、success----上传成功的回调,一般可在这就使用uni.uploadFile来上传图片了,但是博主是表单的所以需要进行表单验证完成后才能上传提交图片。(输出的是图片的本地文件路径列表)

uni.uploadFile:

作用:上传图片

uni.uploadFile({
			url: url,//上传图片的地址
			filePath: ...,//这里是图片的本地文件路径列表(选择图片成功的时候可以拿到,在上边的success回调中res.tempFilePaths即可拿到)
			name: '',//上传的名字叫啥都行
			headers: {
					accessToken: //可以设置你的请求头的token噢
					},
			success(res) {
				//上传成功的回调
				这个res是后端返回给你上传成功的数据里边一般会有上传之后图片的在线路径
			}
	})

至此。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值