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)
},