uniapp

一、拍照,拿到本地路径

首先调用uniapp的api实现拍照

uni.chooseImage({
 	sourceType: ['camera','album'],//拍照或是打开系统相册选择照片
 	count: 3,  //最多三张
    success(res) {
 		if (Array.isArray(res.tempFilePaths)) {
            //最多选择三张,如果多选删掉前面选择的
		    if(res.tempFilePaths.length===3){
				pictures.length=0
			}else if(res.tempFilePaths.length==2&&pictures.length==2){
				pictures.splice(0,1)
		    }
            //把照片的路径放到数组里面
			res.tempFilePaths.forEach(item=>{
			    let picture = {url:item,show:false}
			    pictures.push(picture)
				// 保存到本地,(H5页面不可使用)
				uni.saveImageToPhotosAlbum({
					filePath: item,
				})
			})
 		}
    }
})

这时照片的路径是本地系统路径

二、传到后台

app端

uni.uploadFile({
    url:'后台地址',
    filePath:'文件路径',
    name:'file',
    success:(res)+>{
        console.log(res,'后台返回来的路径')
    }
})

app端到这一步就可以啦

若需要拿到照片的base64

由于 uni.chooseImage 不像 wx.chooseImage 提供了直接转为base64的方法,但是上传后台需要base64格式的图片,那么这时候就需要将临时路径转为base64格式。

方式1:只运行到APP端,就可以使用plus.io.resolveLocalFileSystemURL来转换

方式2:下载插件image-tools - DCloud 插件市场,也可以拿到base64

pc端

上传后台

先将图片的base64转成文件流

base64ToFile(base64){
	const dataArr = base64.split(',');
	const byteString = atob(dataArr[1]);
	const options = {
		type:'image/jpeg',
		endings:'native'
	};
	const u8Arr = new Uint8Array(byteString.length)
	for(let i=0;i<byteString.length;i++){
		u8Arr[i]=byteString.charCodeAt(i);
	}
    return new File([u8Arr],'照片名'+'.png',options)
},

然后再转成formData

let file = this.base64ToFile(base64);
let formData = new FormData();
formData.append('file',file)

然后直接将file传给后台就可以啦!后台就会可以返一个已经在服务器部署好的图片路径回来

所有代码附上(uniapp上da)

// 拍照片
getPic() {
	let pictures = this.pictures;
	let that = this;
	uni.chooseImage({
		sourceType: ['camera','album'],//实现拍照
		count: 3,
		// sourceType:['album'],//打开系统相册
		success(res) {
			if (Array.isArray(res.tempFilePaths)) {
				if(res.tempFilePaths.length===3){
					pictures.length=0
				}else if(res.tempFilePaths.length==2&&pictures.length==2){
					pictures.splice(0,1)
				}
				res.tempFilePaths.forEach(item=>{
					let picture = {url:item,show:false}
					pictures.push(picture)
					// 使用插件拿到照片的base64,转成formData
					//pathToBase64(item).then(base64 => {
					//	let file = that.base64ToFile(base64);
					//	console.log(file)
					//	let formData = new FormData();
					//	formData.append('file',file)
					//	console.log(formData)
                    //})
                    uni.uploadFile({
                        url:'后台地址',
                        filePath:item,
                        name:'file',
                        success:(res)+>{
                            console.log(res,'后台返回来的路径')
                        }
                    })
					// 保存到本地
					uni.saveImageToPhotosAlbum({
						filePath: item,
					})
				})
			}
		}
	})
},
// 将拍的照片的base64转成文件格式然后再转成FormData,就可以使用上传图片的接口了
base64ToFile(base64){
	const dataArr = base64.split(',');
	const byteString = atob(dataArr[1]);
	const options = {
		type:'image/jpeg',
		endings:'native'
	};
	const u8Arr = new Uint8Array(byteString.length)
	for(let i=0;i<byteString.length;i++){
		u8Arr[i]=byteString.charCodeAt(i);
	}
	return new File([u8Arr],'phone.png',options)
},
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐