uniapp uni.chooseImage+uni.uploadFile使用方法与详解

Jyywww1212025-10-17 11:06

uni.chooseImage+uni.uploadFile使用方法与详解

一、uni.chooseImage

实现从本地相册选择图片或使用相机拍照，从手机选择图片后会生成一个临时本地路径（该路径只在本次启动期间可以正常使用）

javascript 复制代码

uni.chooseImage({
	count: 6, //选择可上传图片数量，默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

uniapp官网参数说明

success返回参数说明

二、uni.uploadFile

由于uni.chooseImage生成的路径是一个临时路径，所以需要通过uploadFile将该图片上传到后端，并由后端生成一个服务器路径使其可以随时随地（永久、非本地）访问。

注：一定要让后端将接口method写为POST

javascript 复制代码

uni.chooseImage({
	success: (chooseImageRes) => {
		const tempFilePaths = chooseImageRes.tempFilePaths;
		uni.uploadFile({
			url: 'https://www.example.com/upload', //后端接口地址
			filePath: tempFilePaths[0],
			name: 'file', //后端定义的key
			formData: {
				'user': 'test'
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
			}
		});
	}
});

uniapp官网参数说明

success返回数据说明

最后要将后端返回给的服务器地址拼接上域名才能真正访问图片