微信小程序-file文件流上传图片

最新推荐文章于 2026-05-20 05:51:33 发布

转载最新推荐文章于 2026-05-20 05:51:33 发布 · 1.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/WQLong/p/12525610.html

标签

#微信小程序 #小程序 #微信

本文介绍了如何在微信小程序中使用file文件流上传图片，通过uni.uploadFileAPI逐个上传图片到服务器，同时处理上传成功后的回调，包括显示提示信息和返回到上一页面。

本文章向大家介绍微信小程序-file文件流上传图片，主要包括微信小程序-file文件流上传图片使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

小程序的图片上传功能，官网已给出了比较详细的API（image）

这里说下将上传后的图片提交给服务器，但是微信的上传图片功能不支持批量上传，所以目前只能通过for循环进行上传到服务器

uni.showLoading({
	title: '正在上传',
})
this.imgPaths.forEach((item,index) => {
	uni.uploadFile({
		url:api.busines.uploadImg, // 后台服务URL
		filePath: item, // 微信返回的临时图片地址
		name: 'files',
		header:{
			"Content-Type": "multipart/form-data"
		},
		formData:{// 其他参数
			siteId: that.siteId
		},
		success: (res) => {
			let result = JSON.parse(res.data)
			if (index === (this.imgPaths.length - 1)) {// 判断是否为最后一个图片
			if (result.code === enums.code.REQUEST_SUCCESS) {
				uni.showModal({
					title:"温馨提示",
					content:"上传成功",
					showCancel: false,
					success:function(res){
						let pages = getCurrentPages()
						// #ifdef MP-WEIXIN  
						let previousPage = pages[pages.length - 2].$vm //上一个页面
						// #endif
						// #ifdef H5
						let previousPage = pages[pages.length - 2] //上一个页面
					        // #endif
						previousPage.setData({
							isShowImg: false
						})
						uni.navigateBack({
						    delta: 1
						});
					}
				})
			} else {// 错误提示
				uni.showModal({
					title:"温馨提示",
					content:result.message,
					showCancel: false,
					success:function(res){}
				})
			        uni.showToast({
					title: result.message,
					icon: "none",
					duration: 3000
				})
			}
			uni.hideLoading();
		}
	})
})

这样就可以将上传的图片通过文件流传给后台服务器

原文地址：https://www.cnblogs.com/WQLong/p/12525610.html