uniapp上传单张图片代码分享

最新推荐文章于 2024-09-12 15:56:50 发布

原创最新推荐文章于 2024-09-12 15:56:50 发布 · 317 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

javascript 专栏收录该内容

38 篇文章

订阅专栏

该博客详细介绍了如何在uni-app中实现头像上传功能，包括使用chooseImage API选择图片，获取token，通过uni.uploadFile将图片上传到指定后端接口，并处理上传成功的回调，展示上传状态。

//上传头像
			upload() {
				// 获取token，pub是引入自己写的js文件
				const token = pub.getData("token");
				const that = this
				// 此api用于选择图片
				uni.chooseImage({
					//一些配置，我照抄的
					sourceType: ['camera', 'album'],
					sizeType: ['original', 'compressed'],
					count: 1,	//照片的数量
					success: (res) => {
						//res.tempFilePaths为图片临时地址，需要多选图片的话自行百度处理
						console.log(res.tempFilePaths);
						/* 上传图片 */
						const uploadTask = uni.uploadFile({
							  url : '你的后端接口路径',
							  filePath: res.tempFilePaths[0],
							  // 这个name就是后端接收图片的字段名，不能瞎填
							  name: 'avatarFile',
							  header:{
									// 'Authorization':  token
							  },
							  formData: {
									'type': 'avatar',
									'token': token,
							  },
							  success: function (res1) {
								  if(res1.statusCode===200){
										uni.showToast({
										  title: "头像上传成功！",
										  icon: 'none',
										  duration: 1000,
										})
										that.init();
								  } else {
									  uni.showToast({
									  	title: "服务器错误",
										duration: 1000
									  })
								  }
							  }
						});
					},
					})
			},