实现拍照上传的图片路径能够在表单提交时被正确使用
时间: 2024-12-16 21:32:21 浏览: 7
为了确保拍照上传的图片路径在表单提交时能够被正确使用,关键在于将图片的路径正确地赋值给 `fileList` 数组,并在提交表单时将其传递到后端。以下是具体的实现步骤:
1. **拍照上传**:通过 `uni.chooseImage` 方法选择照片,并将其路径存入 `fileList` 数组中。
2. **文件上传**:调用 `afterRead` 方法处理文件上传逻辑,将上传后的文件 URL 存储到 `fileList` 中。
3. **表单提交**:在 `handleSubmit` 方法中,检查 `fileList` 是否有图片路径,并将其赋值给 `mainData.CORRE_FINPIC`。
### 具体代码实现
#### 拍照上传
```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] }] });
}
});
},
// 文件上传逻辑
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);
},
// 文件上传请求
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);
}
});
});
},
// 表单提交
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'
});
});
}
}
```
### 关键点总结
1. **拍照上传**:使用 `uni.chooseImage` 获取照片路径,并将其存入 `fileList`。
2. **文件上传**:调用 `afterRead` 方法处理文件上传逻辑,将上传后的文件 URL 存储到 `fileList` 中。
3. **表单提交**:在 `handleSubmit` 方法中,检查 `fileList` 是否有图片路径,并将其赋值给 `mainData.CORRE_FINPIC`。
这样就能确保拍照上传的图片路径在表单提交时被正确使用。
阅读全文