uniApp、微信小程序上传单个文件及多个文件-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniApp、微信小程序上传单个文件及多个文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用官方api - uni.uploadFile

这是单个文件上传写法

/**
 * 单个上传文件方法
 */
fun_GetFileUpload(){
	var that = this;
	// 请求接口
	uni.uploadFile({
		url: "url", // 后端接口
		formData: {}, // 需要上传的参数
		filePath: "", // 文件临时地址
		name: 'file', // 后端接收的文件名
		header: {}, // 请求头
		success: res => {
			console.log(res); // 打印返回内容
			// 判断请求是否成功
			if (res.statusCode === 200) {
			    // 判断是否成功
				if(JSON.parse(res.data).result){
					// 成功的场合
					// 提示
					uni.showToast({
						title: JSON.parse(res.data).msg,
						icon: 'success',
					});
				}else{
					// 提示
					uni.showToast({
					    title: JSON.parse(res.data).msg,
						icon: 'error',
					});
				}
			} else {
				// 提示
				uni.showToast({
					title: res.errMsg,
					icon: 'error',
				});
			}
		},
		fail: err => {
			console.log(err)
		}
	});},

这是上传多个文件写法

由于没有多个上传文件的方法，目前只能通过遍历的方式来进行多文件上传文章来源地址https://www.toymoban.com/news/detail-852863.html

/**
 * 遍历上传文件
 */
fun_TraversalFile(){
	var that = this;
	var frequency = 0; // 这个用于判断是否遍历结束
	// 遍历
	that.fileList.map(e=>{
		frequency ++; // 遍历一次+1
		// 请求接口
		uni.uploadFile({
			url: "", // 后端接口
			formData: { }, // 需要上传的参数
			filePath: "", // 文件临时地址
			name: 'file', // 后端接收的文件名
			header: {}, // 请求头
			success: res => {
				console.log(res); // 打印返回值
				// 判断请求是否成功
				if (res.statusCode === 200) {
					// 判断是否成功
					if(JSON.parse(res.data).result){ 
						// 成功的场合
						// 判断执行结束
						if(frequency === that.fileList.length){ // 判断遍历次数是否与需要上传的文件数组长度相同
							// 提示
							uni.showToast({
								title: JSON.parse(res.data).msg,
								icon: 'success',
							});
						}
					}else{
						// 提示
						uni.showToast({
							title: JSON.parse(res.data).msg,
							icon: 'error',
						});
					}
				} else {
					// 提示
					uni.showToast({
						title: res.errMsg,
						icon: 'error',
					});
				}
			},
			fail: err => {
				console.log(err)
			}
		});
	})
},

到了这里，关于uniApp、微信小程序上传单个文件及多个文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！