明道云视图插件开发-附件上传

<template>
<!--
 * 名称: [明道云视图开发工具]
 * 作者: [DU]
 * 联系方式: [iiamdu]
 * 时间: [2024-05-28]
 * 当前版本: [0.0.1]
 * 版本提交时间: 2025-05-28 20:32:58
 * 描述: 上传附件
 *
 -->
  <div class="upload-container">
    <h2>上传文件并新增记录</h2>
    <input type="file" @change="handleFileChange" />
    <button @click="handleUploadAndAddRecord" :disabled="!file">上传并新增记录</button>
    <div v-if="uploading">正在上传...</div>
    <div v-if="uploadSuccess">记录新增成功！</div>
    <div v-if="uploadError" class="error">上传失败：{{ uploadError }}</div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, computed, nextTick } from "vue";
import { config, env, api, utils, md_emitter } from "mdye";
import axios from 'axios';

const { appId, worksheetId, viewId } = config;



const file = ref(null);
const files = ref(null);
const keys = ref(null);
const filePath = ref(null);
const Url = ref(null);
const fileName = ref(null);
const fileSize = ref(null);
const uploading = ref(false);

const lastfilePath = ref(null);

const uploadSuccess = ref(false);
const uploadError = ref('');
const originalFileName = ref('');//原始文件名
const fileType = ref('');
const bucketnum = ref(4); //4为图片，3为文档视频等
const preUrl = ref('https://p1.mingdaoyun.cn/');

    // 获取上传凭证
    const getUploadToken = async () => {
      const response = await axios.post('https://www.mingdao.com/api/Qiniu/GetUploadToken', {
        files: [
          {
            bucket: bucketnum.value, // 3 表示文档、视频等，4 图片
            ext: "." + fileType.value //".jpeg"等
          }
        ],
        type: 0,//固定
        projectId:config.projectId, // 替换为实际的项目 ID
        appId, // 替换为实际的应用 ID
        worksheetId // 替换为实际的工作表 ID
      }, 
      {
        headers: {
          'authorization': 'md_pss_id 0ca06702f07204706606501004400e0449bc0200af084023', // 替换为实际的授权 Token 用官方页面上传附件 F12下请求头复制
          'content-type': 'application/json'
        }
      });

      files.value = response.data.data[0].serverName + response.data.data[0].key;
      keys.value = response.data.data[0].key
      fileName.value = response.data.data[0].fileName
      Url.value = response.data.data[0].url
      return response.data.data[0].uptoken;
    };

    // 上传文件
    const uploadFile = async (file, uptoken) => {
        const formData = new FormData();
        console.log('上传文件对象:', file);
        formData.append('token', uptoken);
        formData.append('file', file); // 使用实际的文件对象
        // formData.append('name', 'link_record.jpeg');
        formData.append('key', keys.value);
        // formData.append('chunk', 0);
        // formData.append('chunks', 1);
        //formData.append('x:serverName', preUrl.value);
        // 根据文档示例添加filePath参数，使用本地时间而非UTC时间
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0');
        const day = String(today.getDate()).padStart(2, '0');
        const localDateStr = `${year}${month}${day}`;

        
        formData.append('x:filePath', filePath.value || `${config.projectId}/${appId}/${worksheetId}/${localDateStr}/`);
        //formData.append('x:fileName', fileName.value);
        //formData.append('x:originalFileName', 'link_record');
        // formData.append('x:fileExt', fileType.value);
        //formData.append('x:fileExt', '.xlsx');

      const response = await axios.post('https://upload.qiniup.com/', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
              console.log('上传成功，响应数据:', response.data);
        // 保存上传结果数据
        //lastKey.value = response.data.key;
        //lastfileName.value = response.data.fileName;
        lastfilePath.value = response.data.filePath;
        //lastfsize.value = parseInt(response.data.fsize); // 确保是数字类型
        
        // 构建完整URL，可能需要添加token
        // 根据文档，URL可能需要包含访问令牌
        let fileUrl = response.data.serverName + response.data.key;
        // if (response.data.token) {
        //   fileUrl += "?token=" + response.data.token;
        // }
        // lastUrl.value = fileUrl;
        
        // console.log('构建的文件URL:', fileUrl);
        return fileUrl; // 返回完整的文件 URL
    };

          // 新增记录并赋值附件字段
      const addRecordWithAttachment = async (fileUrl) => {
        console.log('准备添加记录，文件URL:', fileUrl);
        
        // 检查必要的数据是否存在
        // if (!lastKey.value || !lastfileName.value) {
        //   console.error('缺少必要的文件信息，无法添加记录');
        //   uploadError.value = '上传文件信息不完整，无法添加记录';
        //   return;
        // }
        
        const millis = "o_1ir3mg6m1l741oh7" + Date.now();//自定义传入，o_开头，长度一样的随机数
        const response = await api.addWorksheetRow({
        appId, // 替换为实际的应用 ID
        worksheetId, // 替换为实际的工作表 ID
        receiveControls: [
          {
            "controlId": "6843b20c82453d0d030cf68f",
            "type": 14,
            "value": `{"attachmentData":[],"attachments":[{"fileID":"${millis}","fileSize":${parseInt(fileSize.value) || 0},"serverName":"${preUrl.value}","filePath":"${lastfilePath.value}","fileName":"${fileName.value}","fileExt":"","originalFileName":"${originalFileName.value}","key":"${keys.value}","url":"${Url.value}","oldOriginalFileName":"${originalFileName.value}","index":0,"isEdit":false}],"knowledgeAtts":[]}`,
            "controlName": "附件",
            "dot": 0
        }
        ]
      });
      return response;
    };

    // 文件选择事件
    const handleFileChange = (event) => {
      console.log('选择了文件:', event.target.files[0]);
      originalFileName.value = event.target.files[0].name.split('.')[0];// 原始文件名，1122.jpeg  只提取1122
      fileType.value = event.target.files[0].name.split('.')[1];// 文件类型，如jpeg
      fileSize.value = event.target.files[0].size;//文件大小
      file.value = event.target.files[0];
      if(!file.value.type.startsWith('image/')){bucketnum.value = 3;preUrl.value = 'https://doc.mingdao.com/';};

      // 检查文件类型
      // if (file.value) {
      //   console.log('文件类型:', file.value.type);
      //   // 如果不是图片类型，提示用户
      //   if (!file.value.type.startsWith('image/')) {
      //     uploadError.value = '只能上传图片文件！';
      //   } else {
      //     uploadError.value = '';
      //   }
      // }
    };

    // 上传并新增记录
    const handleUploadAndAddRecord = async () => {
      if (!file.value) {
        uploadError.value = '请先选择文件';
        return;
      }

      uploading.value = true;
      uploadSuccess.value = false;
      uploadError.value = '';

      try {
        // 获取上传凭证
        console.log('正在获取上传凭证...');
        const uptoken = await getUploadToken();
        console.log('成功获取上传凭证');
        
        // 上传文件
        console.log('正在上传文件...');
        const fileUrl = await uploadFile(file.value, uptoken);
        console.log('文件上传成功，URL:', fileUrl);
        
        // 添加记录
        console.log('正在添加记录...');
        const result = await addRecordWithAttachment(fileUrl);
        console.log('记录添加结果:', result);
        
        uploadSuccess.value = true;
      } catch (error) {
        console.error('上传或新增记录失败:', error);
        uploadError.value = error.message || '未知错误';
      } finally {
        uploading.value = false;
      }
    };


</script>

<style>
.app-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.upload-container {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.selected-record {
  margin-top: 10px;
  padding: 8px;
  background-color: #ecf5ff;
  border-radius: 4px;
  border-left: 3px solid #409eff;
}

.upload-results {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.upload-results ul {
  padding-left: 20px;
}

.upload-results li {
  margin-bottom: 5px;
}

.upload-results .success {
  color: #67c23a;
}

.upload-results .error {
  color: #f56c6c;
}
</style>

教程参考：https://www.kdocs.cn/l/cilNe7Y3ZNpE