Commit 8d8b9a15 authored by xinzhedeai's avatar xinzhedeai

add:培训演练图片上传

parent 4411a1f9
......@@ -60,7 +60,7 @@
@confirm="onDateConfirm" @cancel="showDatePicker = false" />
</van-popup>
<div>
<!-- <div>
<h5 class="imager-item-title title_require">
<span style="font-weight: 500;font-size: 0.28rem;color: #333;">请上传图片(最多6张)</span>
<span></span>
......@@ -69,7 +69,23 @@
<van-uploader v-model="formData.photos" :max-count="6" multiple
:after-read="handleFileUpload" class="uploader-wrapper" />
</div>
</div>
</div> -->
<!-- 详情模式 -->
<div class="img-wrapper" style="display: flex;gap:.16rem;">
<div style="position: relative;" v-for="(imgItem, index) in formData.floorPlanPhotos">
<img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
@click="showImage(formData.floorPlanPhotos, index)" />
<div v-if="flag=='XG'" class="van-uploader__preview-delete"
@click="handleDeleteFloorPlan(index, 'floorPlan')"><i
class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
</div>
<div v-if="formData.floorPlanPhotos.length<6 && flag=='ADD' ">
<van-uploader :before-read="beforeRead" :after-read="(file) => afterRead(file, 'floorPlan')"
class="uploader-wrapper" :deletable="false" :preview-image="false">
<img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt="" srcset="">
</van-uploader>
</div>
</div>
<!-- form结束 -->
......
......@@ -19,6 +19,7 @@ window.addEventListener("load", function () {
// maxDate: new Date(new Date().getFullYear() + 10, 11),
// 新增以下数据
formData: {
floorPlanPhotos: '',
submitDate: gemhoUtil.getTargetDateYMD(),
createDate: gemhoUtil.getTargetDateYMD(),
date: gemhoUtil.getTargetDateYMD(),
......@@ -50,6 +51,69 @@ window.addEventListener("load", function () {
// }
// },
methods: {
// 处理平面图删除
handleDeleteFloorPlan(index, type) {
this.formData.floorPlanPhotos.splice(index, 1);
},
beforeRead(file) {
if(!['image/png','image/jpeg','image/jpg'].includes(file.type)){
vant.Dialog.alert({
title: '信息提示',
message: '文件格式不正确'
})
return;
}
if (file.size > (10 * 1024 * 1024)) {
vant.Dialog.alert({
title: '信息提示',
message: '文件大小不可超过10M'
})
return false;
}
return true;
},
afterRead(file, type) { // 调用爱山东中台系统,将数据流传递过去
alert(type)
vant.Toast.loading({
message: '正在处理...',
forbidClick: true,
loadingType: 'spinner',
});
// 文件读取完成后的处理逻辑
const formData = new FormData();
formData.append('file', file.file); // 通过FormData构建要上传的文件数据
// formData.append('biz_content',SM.encrypt('dangerjob', API_KEY_MAP["upload"]["publicKey"]));
// 发送HTTP POST请求
fetch(BASE_URL + '/common/upload', {
method: 'POST',
body: formData,
headers: {
'Authorization': gemhoUtil.getCookie('token'),
}
})
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(value => {
console.log(value, 'value图片上********'); // 处理后端返回的数据
if(value){ // 返回信息不为空,则进行解密操作
this.formData.floorPlanPhotos.push(value.fileName)
// 可根据后端返回的数据做进一步处理,如显示上传成功信息等
setTimeout(() => {
vant.Toast.clear()
}, 0);
}else{
this.afterRead(file)
}
})
.catch(error => {
// console.error('There has been a problem with your fetch operation:', error);
});
},
showDatePickerModal(){
if(this.flag=='XQ'){
return
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment