uni.app上传照片并将路径转换成base64传给后端

最新推荐文章于 2025-05-20 18:57:16 发布

原创最新推荐文章于 2025-05-20 18:57:16 发布 · 3.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

vue上传修改头像专栏收录该内容

2 篇文章

订阅专栏

大家好，在这里记录一篇困扰了我一天的问题：Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. at eval (test.vue:121) ，因为我是用uni.app

上传的照片，然后上传之后显示照片的路径为blob：http://..............但是我要的是base64格式的照片传给后端，所以我现在要将blog格式的照片转换成base64

一、使用常见的readAsDataURL()方法等

不出意外还是同样的报错：

Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. at eval (test.vue:121)

总之，找了很多例如将blob转换成url，再将url转换成base64，或者将blob直接转换成base64等等，但都是错的，毫无变化；

二、更改修改按钮，比如改为input

看了好多大家都是使用<input type="file" >格式的上传按钮，但是我的就是如下图：

我觉得挺好的，所以这不想改，但是又没办法，就去尝试改一下，但是还是没啥变化，同样的报错、、、、

三、使用uni.app来操作

最后想到既然获取是用uni.app那么转也可以吧，然后就去搜了一下，果然有方法uni.getImageInfo()

果然可以，“解铃人还须系铃人”！

总结

全部代码：

	PutPhoto: function() {
							uni.chooseImage({
								count: 1, //图片张数，默认9
								sizeType: ['compressed'], //original 原图，compressed 压缩图，
								sourceType: ['album'], //album 从相册选图，camera 使用相机，
								success: (res) => { //成功返回的函数
								// console.log('图片路径为：', res.tempFilePaths[0]) //当前选中的图片
								// var imageSrc = res.tempFilePaths[0] //将图片的地址赋值给imageSrc
								// 转base64
									uni.getImageInfo({
										src:res.tempFilePaths[0],
										success:(path)=>{
											pathToBase64(path.path).then(base64=>{
												console.log("这是转之后的",base64);
												var imageBase64=base64;
												uni.request({ //上传图片
													url: "xxxxxxxxxxx",//后端接口
													timeout: 10000,
													method: 'POST',
													dataType: 'json',
													data: {
														personNo:this.employeeId,
														imageBase64:imageBase64,
													},
													success: (res) => { //接口调用成功的回调函数
														console.log('uploadImage success, res is:', res)
														uni.showToast({ //消息提示框
															title: '修改成功',
															icon: 'success',
															duration: 1000,
																												}),
														uni.setStorage({
															key:'image1',
															data:imageBase64
														})
														this.getAvatar(),//上传并实时刷新照片
														this.imageBase64 =imageBase64
													},
													fail: (err) => { //接口调用失败的回调函数	
														console.log('失败返回：', err);
														uni.showModal({ //消息提示框
															content: err.errMsg, //错误信息
															showCancel: false
														});
													}
												});
											})
											.catch(error=>{
												console.log(error)
											})
										}
									})
							},
							fail: (err) => { //图片接口调用失败的回调函数	
								console.log('chooseImage fail', err)
		 
						// 判断是否允许调用摄像头
										uni.getSetting({
										success: (res) => {
											let authStatus = res.authSetting['scope.album'];
											if (!authStatus) {
												uni.showModal({
													title: '授权失败',
													content: 'Hello uni-app需要从您的相册获取图片，请在设置界面打开相关权限',
													success: (res) => {
														if (res.confirm) {
															uni.openSetting()
														}
												}
											})
											}
										}
									 }) 
								}
							})
						},

最后，希望可以帮助到你们！我也会继续努力哦！（송강사랑해）