From 6f81691ab09d586470426ee0bfa99cec83797f7b Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期一, 23 六月 2025 15:52:24 +0800
Subject: [PATCH] 实验运行模块 图片换真实上传
---
laboratory/src/views/dataManagement/sampleRecordList/components/sampleDialog.vue | 98 +++++++++++++++++++++++++++---------------------
1 files changed, 55 insertions(+), 43 deletions(-)
diff --git a/laboratory/src/views/dataManagement/sampleRecordList/components/sampleDialog.vue b/laboratory/src/views/dataManagement/sampleRecordList/components/sampleDialog.vue
index 7cc0aec..591ee07 100644
--- a/laboratory/src/views/dataManagement/sampleRecordList/components/sampleDialog.vue
+++ b/laboratory/src/views/dataManagement/sampleRecordList/components/sampleDialog.vue
@@ -117,13 +117,15 @@
>
<el-upload
class="upload-demo"
- action="#"
+ :action="uploadUrl"
+ :headers="uploadHeaders"
:file-list="fileList"
- :auto-upload="false"
+ :auto-upload="true"
list-type="picture-card"
- :on-change="handleChange"
- :on-remove="handleRemove"
- :before-upload="beforeUpload"
+ :on-change="handleImageChange"
+ :on-remove="handleImageRemove"
+ :on-success="handleImageSuccess"
+ :on-preview="handlePreview"
multiple
>
<i class="el-icon-plus"></i>
@@ -144,6 +146,8 @@
<script>
import { updateRecordOperation } from '../service'
+import { getFullUrl } from '@/utils/utils';
+import apiConfig from '@/utils/baseurl';
export default {
name: "SampleDialog",
@@ -194,9 +198,12 @@
{ required: true, message: "请输入加水量", trigger: "blur" },
],
},
+ uploadUrl: apiConfig.imgUrl,
+ uploadHeaders: {
+ Authorization: sessionStorage.getItem('token') || ''
+ },
fileList: [],
- defaultImage: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
- };
+ };
},
watch: {
data: {
@@ -208,8 +215,11 @@
const imageUrls = val.pictures.split(',');
this.fileList = imageUrls.map((url, index) => ({
name: `sample-image-${index + 1}.png`,
- url: url
+ url: getFullUrl(url),
+ status: 'success',
}));
+ } else {
+ this.fileList = [];
}
}
},
@@ -222,55 +232,57 @@
this.form = this.$options.data().form;
this.fileList = [];
},
- // 上传前校验
- beforeUpload(file) {
- const isImage = file.type.startsWith('image/');
- const isLt2M = file.size / 1024 / 1024 < 2;
-
- if (!isImage) {
- this.$message.error('只能上传图片文件!');
- return false;
- }
- if (!isLt2M) {
- this.$message.error('图片大小不能超过 2MB!');
- return false;
- }
- return true;
- },
- // 文件状态改变时的钩子
- handleChange(file, fileList) {
+ handleImageChange(file, fileList) {
this.fileList = fileList;
-
- // 更新pictures字段
- if (fileList.length === 0) {
- this.form.pictures = this.defaultImage;
- } else {
- const imageUrls = fileList.map(file => file.url || this.defaultImage);
- this.form.pictures = imageUrls.join(',');
+ // 只在移除时处理form.pictures，上传成功时在handleImageSuccess处理
+ if (file.status === 'removed') {
+ const urls = fileList.map(f => f.url).filter(Boolean);
+ this.form.pictures = urls.join(',');
}
},
- // 移除文件时的钩子
- handleRemove(file, fileList) {
+ handleImageSuccess(res, file, fileList) {
+ // res.msg为图片url
+ const url = res.msg;
+ file.url = getFullUrl(url);
+ // 更新fileList中对应file的url
+ this.fileList = fileList.map(f => {
+ if (f.uid === file.uid) {
+ return file;
+ }
+ return f;
+ });
+ // 更新form.pictures
+ const urls = this.fileList.map(f => f.url).filter(Boolean);
+ this.form.pictures = urls.join(',');
+ },
+ handleImageRemove(file, fileList) {
this.fileList = fileList;
-
- // 更新pictures字段
- if (fileList.length === 0) {
- this.form.pictures = this.defaultImage;
- } else {
- const imageUrls = fileList.map(file => file.url || this.defaultImage);
- this.form.pictures = imageUrls.join(',');
- }
+ const urls = fileList.map(f => f.url).filter(Boolean);
+ this.form.pictures = urls.join(',');
+ },
+ handlePreview(file) {
+ this.$alert(`<img src='${file.url}' style='width:100%' />`, '图片预览', {
+ dangerouslyUseHTMLString: true
+ });
},
async handleSubmit() {
this.$refs.form.validate(async (valid) => {
if (valid) {
+ // 处理图片路径为相对路径
+ let pictures = this.form.pictures;
+ if (pictures) {
+ const prefix = apiConfig.showImgUrl;
+ pictures = pictures.split(',').map(url => {
+ return url.startsWith(prefix) ? url.substring(prefix.length) : url;
+ }).join(',');
+ }
const submitData = {
...this.form,
+ pictures,
handlePersonId: JSON.parse(sessionStorage.getItem('userInfo') || '{}').userId || "",
handlePersonName: JSON.parse(sessionStorage.getItem('userInfo') || '{}').nickName || "",
fileList: this.fileList,
};
-
try {
// 先调用updateRecordOperation接口保存数据
const res = await updateRecordOperation(submitData);
--
Gitblit v1.7.1