uniapp单图片，多图片上传

原创已于 2024-04-17 21:54:51 修改 · 759 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #javascript

于 2024-04-17 21:53:59 首次发布

本文介绍了在uniapp中如何通过uni.chooseImage获取图片并使用uni.uploadFile进行文件上传，包括单文件和多文件的上传方法，以及如何处理blob类型转换为file类型的过程。

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

官方文档

uni.uploadFile文件上传

原理

提示：uniapp不能传file类型的参数，所以需要使用请求体body中的form-data 格式来传递file类型的文件

通过 uni.chooseImage 接口获取图片的临时文件路径，临时文件是blob类型，然后在发送请求前会将blob类型的临时文件tempFilePaths 转为file类型的文件filePath，并指定文件对应的 key 值，后端接收文件的时候可以根据这个 key 获取文件，上传成功后触发 success 回调函数，可以在这里打印上传接口返回的数据。

如何实现

<script>
	export default {
		data() {
			return {
				...
			}
		},
		onLoad() {
			...
		},
		methods: {
			 upload(){
				uni.chooseImage({
					count: 1,  // 图片数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择或者拍照
					//count sizeType和sourceType为chooseImage的选项，可以省略不写
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths[0];
						uni.uploadFile({
							url: 'https://www.example.com/upload', //上传图片的接口地址
							filePath: tempFilePaths,//要上传的文件路径
							name: 'avatar',//文件对应的key值
							header: {
								'Authorization':'Bearer '+uni.getStorageSync('token'),
							} ,
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							},							
						});
					},
				});
				
			}
		}
	}
</script>

实际运用

一般文件上传会封装成方法来简化操作。

单文件

实现了对象名为file，对象值为file类型的单个文件的上传。

export const postUpload = (filePath) => {
	console.log(filePath, '调用接口postUpload');
	return new Promise((resolve, reject) => {
		  uni.uploadFile({
			url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
			filePath: filePath,
			name: 'file',
			header: {
				'Authorization':'Bearer '+uni.getStorageSync('token'),
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes);
			},							
		});
	});
	
};

多文件

实现了对象名为file，对象值为filelist的一组文件的上传。

export const postSubmitTask = (id,imagesList) => {
	var filelist = [];
	for (var i = 0; i < imagesList.length; i++) {
		var obj = {};
		obj.name = "images";
		obj.uri = imagesList[i];
		filelist.push(obj)
	}
	console.log(filelist);
	console.log(id,imagesList, '调用接口postSubmitTask');

	return new Promise((resolve, reject) => {
		 uni.uploadFile({
			url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
			files:filelist,
			formData: {
				'taskId':id
			},
			header: {
				'Authorization':'Bearer '+uni.getStorageSync('token'),
			},
			success: (res) => {
				console.log(res.data);
			},
		});
	});
};