uniapp中APP端图片转base64格式上传

这段代码展示了在uni-app中如何调用相机获取图片,并使用imageTools.js库将图片转换为base64格式,然后上传到服务器。转换过程中涉及到的方法包括pathToBase64和base64ToPath,最后将上传成功的图片路径保存。

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

import  { pathToBase64, base64ToPath }  from '../../utils/imageTools.js';
	// 调用相机
			toCamera(){
				let that=this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'], //这要注意,camera调拍照,album是打开手机相册
					success: (res)=> {
						console.log(res);
						const tempFilePaths = res.tempFilePaths[0];
						pathToBase64(tempFilePaths)
						  .then(base64 => {
							// console.log("转换成功==>",base64)
							that.imgList = base64;
							that.upLoad(that.imgList);
						  })
						  .catch(error => {
							console.error("转换失败==>",error)
						  })
					},
					fail: (err) => {
						console.log("imgchoose",err);
						uni.navigateTo({
							url:"../productionProcess/productionProcess"
						})
					}
				});
			},
pathToBase64(tempFilePaths)
.then(base64 => {
	// console.log("转换成功==>",base64)
	that.imgList = base64;
	that.upLoad(that.imgList);
  })
  .catch(error => {
	console.error("转换失败==>",error)
  })
// 上传图片
			async upLoad(filePath){
				// console.log(this.$baseUrl)
				let uniIdToken=uni.getStorageSync('uniIdToken');
				const upLoadRes = await this.$myRequest({
					url: this.$baseUrl + '/api/v1/Systen.Core/FileSystem/UpdadBase64ToImage',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization':uniIdToken
					},
					method:'POST',
					data:{
						Base64ImageData:filePath
					}
				})
				// console.log(upLoadRes)
				if(upLoadRes.statusCode == 200){
					// 保存用户信息
					this.pic=this.$baseUrl +upLoadRes.data.Result.ImagePath;
					this.imgPath=upLoadRes.data.Result.ImagePath;
					
					console.log("上传图片",upLoadRes)
				}else {
					// 打印错误日志
					console.log("上传图片错误",upLoadRes)
				}
			}
/* 处理文件路径 */
function getLocalFilePath(path) {
    if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
        return path
    }
    if (path.indexOf('file://') === 0) {
        return path
    }
    if (path.indexOf('/storage/emulated/0/') === 0) {
        return path
    }
    if (path.indexOf('/') === 0) {
        var localFilePath = plus.io.convertAbsoluteFileSystem(path)
        if (localFilePath !== path) {
            return localFilePath
        } else {
            path = path.substr(1)
        }
    }
    return '_www/' + path
}
/* // 图片转base64ToPath */
export function pathToBase64(path) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            if (typeof FileReader === 'function') {
                var xhr = new XMLHttpRequest()
                xhr.open('GET', path, true)
                xhr.responseType = 'blob'
                xhr.onload = function() {
                    if (this.status === 200) {
                        let fileReader = new FileReader()
                        fileReader.onload = function(e) {
                            resolve(e.target.result)
                        }
                        fileReader.onerror = reject
                        fileReader.readAsDataURL(this.response)
                    }
                }
                xhr.onerror = reject
                xhr.send()
                return
            }
            var canvas = document.createElement('canvas')
            var c2x = canvas.getContext('2d')
            var img = new Image
            img.onload = function() {
                canvas.width = img.width
                canvas.height = img.height
                c2x.drawImage(img, 0, 0)
                resolve(canvas.toDataURL())
                canvas.height = canvas.width = 0
            }
            img.onerror = reject
            img.src = path
            return
        }
        if (typeof plus === 'object') {
            plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
                entry.file(function(file) {
                    var fileReader = new plus.io.FileReader()
                    fileReader.onload = function(data) {
                        resolve(data.target.result)
                    }
                    fileReader.onerror = function(error) {
                        reject(error)
                    }
                    fileReader.readAsDataURL(file)
                }, function(error) {
                    reject(error)
                })
            }, function(error) {
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            wx.getFileSystemManager().readFile({
                filePath: path,
                encoding: 'base64',
                success: function(res) {
                    resolve('data:image/png;base64,' + res.data)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}
/* base64转文件路径 */
export function base64ToPath(base64) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            base64 = base64.split(',')
            var type = base64[0].match(/:(.*?);/)[1]
            var str = atob(base64[1])
            var n = str.length
            var array = new Uint8Array(n)
            while (n--) {
                array[n] = str.charCodeAt(n)
            }
            return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
        }
        var extName = base64.match(/data\:\S+\/(\S+);/)
        if (extName) {
            extName = extName[1]
        } else {
            reject(new Error('base64 error'))
        }
        var fileName = Date.now() + '.' + extName
        if (typeof plus === 'object') {
            var bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
            bitmap.loadBase64Data(base64, function() {
                var filePath = '_doc/uniapp_temp/' + fileName
                bitmap.save(filePath, {}, function() {
                    bitmap.clear()
                    resolve(filePath)
                }, function(error) {
                    bitmap.clear()
                    reject(error)
                })
            }, function(error) {
                bitmap.clear()
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            var filePath = wx.env.USER_DATA_PATH + '/' + fileName
            wx.getFileSystemManager().writeFile({
                filePath: filePath,
                data: base64.replace(/^data:\S+\/\S+;base64,/, ''),
                encoding: 'base64',
                success: function() {
                    resolve(filePath)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}
### 实现Base64字符串换为Blob对象 在UniApp应用开发过程中,将Base64字符串换成Blob对象是一个常见的需求,尤其是在处理文件上传或下载场景时。对于APP而言,可以通过JavaScript内置的方法完成这一过程。 #### 方法定义与说明 为了实现Base64到Blob的换,在客户编写如下函数: ```javascript function base64ToBlob(base64, type = 'image/png') { const reg = /^data:image\/([a-zA-Z]+);base64,/i; let matches = base64.match(reg); if (matches !== null && matches.length >= 2) { type = `image/${matches[1]}`; base64 = base64.slice(matches[0].length); } var binaryString = atob(base64), len = binaryString.length, bytes = new Uint8Array(len); for (var i = 0; i < len; ++i) { bytes[i] = binaryString.charCodeAt(i); } return new Blob([bytes], {type}); } ``` 此段代码首先移除可能存在的"data:"协议头,并解析MIME类型;接着利用`atob()`解码Base64编码的数据串得到二进制字符表示形式;最后创建一个新的Uint8Array实例填充这些字符对应的ASCII数值,并以此构建Blob对象[^1]。 #### 使用示例 假设已经有一个名为`base64Str`变量保存着一张PNG图片Base64编码字符串,则可按照下面的方式调用上述方法获得相应的Blob对象: ```javascript let blobObj = base64ToBlob(base64Str, 'image/png'); // 此处可以继续对blobObj进行操作,比如上传至服务器等。 ``` #### 注意事项 当涉及到不同类型的媒体资源(如JPEG、GIF等),应当相应调整传入`base64ToBlob`函数第二个参数指定的内容类型以匹配实际素材格式[^3]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值