将这个页面的拍照上传功能在拍摄图片后保存到手机本地相册
时间: 2024-12-16 16:32:35 浏览: 5
要在当前页面实现拍照上传功能并在拍摄图片后保存到手机本地相册,你需要对现有的代码进行一些修改和扩展。具体步骤如下:
1. **引入必要的权限**:确保应用有访问相机和写入相册的权限。
2. **修改拍照函数**:在拍照完成后,调用保存图片到相册的方法。
### 修改后的代码
#### 1. 引入必要的权限
在 `manifest.json` 或相应的配置文件中,确保添加了以下权限:
```json
{
"permissions": {
"scope.camera": {
"description": "需要使用您的摄像头"
},
"scope.writePhotosAlbum": {
"description": "需要保存照片到您的相册"
}
}
}
```
#### 2. 修改拍照函数
在 `methods` 中修改 `takePhoto` 函数,并添加保存图片到相册的功能:
```javascript
methods: {
takePhoto() {
uni.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera'], // 只能选择拍照
success: (res) => {
const tempFilePaths = res.tempFilePaths;
this.fileList = [// 更新 fileList
{ url: tempFilePaths[0], status: 'uploading', message: '上传中' }
];
this.afterRead({ file: [{ url: tempFilePaths[0] }] });
// 保存图片到相册
uni.saveImageToPhotosAlbum({
filePath: tempFilePaths[0],
success: function () {
uni.showToast({
title: '已保存到相册',
icon: 'success'
});
},
fail: function (err) {
uni.showToast({
title: '保存失败,请检查权限设置',
icon: 'none'
});
console.error('保存图片到相册失败:', err);
}
});
}
});
},
// 其他方法保持不变
}
```
### 完整的 `methods` 部分
```javascript
methods: {
takePhoto() {
uni.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera'], // 只能选择拍照
success: (res) => {
const tempFilePaths = res.tempFilePaths;
this.fileList = [// 更新 fileList
{ url: tempFilePaths[0], status: 'uploading', message: '上传中' }
];
this.afterRead({ file: [{ url: tempFilePaths[0] }] });
// 保存图片到相册
uni.saveImageToPhotosAlbum({
filePath: tempFilePaths[0],
success: function () {
uni.showToast({
title: '已保存到相册',
icon: 'success'
});
},
fail: function (err) {
uni.showToast({
title: '保存失败,请检查权限设置',
icon: 'none'
});
console.error('保存图片到相册失败:', err);
}
});
}
});
},
async afterRead(event) {
let lists = [].concat(event.file);
let fileListLen = this[`fileList${event.name}`].length;
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
});
});
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url);
let parsedResult = JSON.parse(result);
let item = this[`fileList${event.name}`][fileListLen];
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: parsedResult.data
}));
fileListLen++;
}
console.log(this.fileList);
},
deletePic(e) {
this['fileList'].splice(0, 1);
},
uploadFilePromise(url) {
const header = {
'Authorization': `Bearer ${getToken()}`
};
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: 'http://10.118.50.18:8001/api/danger_rectify_record/upload', // 仅为示例,非真实的接口地址
filePath: url,
header: header,
name: 'fileinput',
success: (res) => {
resolve(res.data);
}
});
});
},
fetchData() {
const params = {
page: 1,
rows: 30,
sort: "DANGER_R_ID",
order: "desc",
wheres: JSON.stringify([
{ name: "ORDER_STATUS", value: "1" },
{ name: "DANGER_R_ID", value: this.selectedRecordId }
])
};
request({
url: '/api/danger_rectify_record/getPageData',
method: 'POST',
header: {
'content-type': 'application/json',
'Authorization': `Bearer ${getToken()}`
},
data: params,
dataType: 'json'
}).then(response => {
this.data = response;
if (this.data.rows.length > 0) {
this.editableData = { ...this.data.rows[0] };
}
this.dataLoaded = true;
}).catch(error => {
console.error(error);
uni.showToast({
title: '请求失败',
icon: 'none'
});
});
},
handleSubmit() {
console.log(this.editableData);
const mainData = {};
if (this.fileList.length !== 0) {
mainData.CORRE_FINPIC = this.fileList[0].url; // 使用 fileList 中的路径
}
if (this.editableData.CORRE_FINTIME !== '' && this.editableData.CORRE_FINTIME !== null) {
mainData.CORRE_FINTIME = this.editableData.CORRE_FINTIME;
} else if (this.editableData.CORRE_FINTIME === '' || this.editableData.CORRE_FINTIME === null) {
mainData.CORRE_FINTIME = '2024-11-15 09:50:32';
}
mainData.DANGER_R_ID = this.editableData.DANGER_R_ID;
mainData.ORDER_STATUS = 2;
console.log(mainData);
request({
url: '/api/Rectification/update',
method: 'POST',
header: {
'content-type': 'application/json',
'Authorization': `Bearer ${getToken()}`
},
data: { mainData },
dataType: 'json'
}).then(response => {
console.log(response);
uni.showToast({
title: '更新成功',
icon: 'success'
});
}).catch(error => {
console.error(error);
uni.showToast({
title: '更新失败',
icon: 'none'
});
});
}
}
```
通过以上修改,当用户拍照后,图片不仅会被上传到服务器,还会被保存到用户的手机本地相册中。
阅读全文