模型上传

杨磊

2025-06-12 9abfddf34884e3a9d9f29d059f151e80b4d2896e

模型上传

 src/assets/js/middleGround/api/dps5.js

@@ -221,6 +221,45 @@
            data
        });
    },

    //获取文件信息
    postFileUploadGetFileInfo(body, options) {
        return request('/file/FileUpload/GetFileInfo', {
            method: 'POST',
            data: body,
            ...(options || {})
        });
    },
    //初始化文件
    postFileUploadInitFile(body, options) {
        return request('/file/FileUpload/InitFile', {
            method: 'POST',
            data: body,
            ...(options || {})
        });
    },
    //上传文件
    postFileUploadUpload(body, file, options) {
        const formData = new FormData();
        if (file) {
            formData.append('file', file);
        }
        Object.keys(body).forEach((ele) => {
            const item = body[ele];
            if (item !== undefined && item !== null) {
                formData.append(
                    ele,
                    typeof item === 'object' && !(item instanceof File) ? JSON.stringify(item) : item
                );
            }
        });
        return request('/file/FileUpload/Upload', {
            method: 'POST',
            data: formData,
            requestType: 'form',
            ...(options || {})
        });
    }
}

export default dps5Api;

 src/views/model/children/landerModel.vue

@@ -121,6 +121,15 @@
            style="--el-switch-on-color: #13ce66"
          />
        </el-form-item>
        <el-form-item label="模型文件" :label-width="formLabelWidth">
          <el-upload :before-upload="beforeUpload" :limit="1" v-if="!form.ModelFile">
            <template #trigger>
              <el-button type="primary">上传模型</el-button>
            </template>
          </el-upload>
          <div v-else>{{ form.ModelFile.name }}</div>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            v-model="form.ModelRemarks"
@@ -146,6 +155,7 @@
import { inject, onMounted, reactive, ref, watch } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { curStoreInfo } from "@/store/index";
import SparkMD5 from "spark-md5";
import {
  ComponentSize,
  ElMessage,
@@ -172,6 +182,8 @@
const background = ref(true);
const isLoading = ref(false);
const tableData = ref([]);
const file = ref(null);
const md5 = ref("");
const previewUrl = ref(
  "./static/modelView/index.html?md5=62d4eadc420b7403fce2be993baa095d&name=飞行棋&domain=https://www.jlstp.cn&target=iframe"
);
@@ -180,7 +192,10 @@
  JointData: "",
  IsSimulation: false,
  ModelRemarks: "",
  ModelFile: null
});

const progress = ref(0);
const seleStore = curStoreInfo();
//分页数据量
const tableTotal = ref(0);
@@ -198,6 +213,101 @@
  }
);

const beforeUpload = (file) => {
  file.value = file;
  md5.value = "";
  progress.value = 0;

  if (file.value) {
    const md5 = calculateMD5(file.value);
    console.log(md5, "md5md5md5md5.value");
  }
  console.log(file.value, "file.value");
  console.log(md5.value, "md5.value");
  return false;
};

// 计算MD5
const calculateMD5 = (file) => {
  const chunkSize = 1 * 1024 * 1024; // 2MB分块
  const chunks = Math.ceil(file.size / chunkSize);
  const spark = new SparkMD5.ArrayBuffer();
  const fileReader = new FileReader();

  let currentChunk = 0;

  fileReader.onload = (e) => {
    spark.append(e.target.result);
    currentChunk++;
    progress.value = Math.min(100, Math.floor((currentChunk / chunks) * 100));

    if (currentChunk < chunks) {
      loadNextChunk();
    } else {
      md5.value = spark.end();
      console.log(md5.value, "md5.value");
      console.log(file, "file.value");

      if (md5.value) {
        initFile(md5.value, file);
      }
      progress.value = 100;
    }
  };

  fileReader.onerror = () => {
    console.error("文件读取错误");
  };

  const loadNextChunk = () => {
    const start = currentChunk * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    fileReader.readAsArrayBuffer(file.slice(start, end));
  };
  loadNextChunk();
};

const initFile = (md5, file) => {
  form.ModelFile = {
    name: file.name,
    md5: md5,
  };
  MG.dps5
    .postFileUploadGetFileInfo({
      md5: md5,
    })
    .then((res) => {
      console.log(res, "res");
      if (res && !res.id) {
        const body = {
          name: file.name,
          md5: md5,
          fileName: file.value.name,
          extension: file.name.split(".").pop(),
          fileType: "model",
          metaData: "",
          type: "model",
          icon: "",
          size: file.size,
          accessType: "Private", // Public and Private
        };

        MG.dps5.postFileUploadInitFile(body).then((initRes) => {
          console.log(initRes, "initRes");
          const params = {
            Md5: md5,
            IsLastOne: true,
            Offset: 0,
            file,
          };

          MG.dps5.postFileUploadUpload(params).then((uploadRes) => {
            console.log(uploadRes, "uploadRes");
          });
        });
      }
    });
};
// 搜索
const handleSearch = () => {
  console.log(input4.value, "input4");
@@ -253,6 +363,7 @@
  isLoading.value = true;
  const fields = {
    ModelName: [],
    ModelFile: [],
    JointData: [],
    IsSimulation: [],
    ModelRemarks: [],
@@ -360,6 +471,9 @@
              case "ModelRemarks":
                fieldObj["textValue"] = form[key];
                break;
              case "ModelFile":
                fieldObj["linkFiles"].push(form[key].md5);
                break;
            }
            editObj.add.push(fieldObj);
          }
@@ -428,9 +542,16 @@
            case "ModelRemarks":
              fieldObj["textValue"] = form[key];
              break;
            case "ModelFile":
              fieldObj["linkFiles"].push(form[key].md5);
              break;
          }
          fieldList.push(fieldObj);
        }

        console.log(fieldList, "fieldList");

        debugger;
        const params = {
          accessModule: "",
          accessPath: seleStore.channelInfo.data.idPath,