实验运行模块 图片换真实上传

董国庆

2025-06-23 6f81691ab09d586470426ee0bfa99cec83797f7b

 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);