明道云视图插件开发-附件上传
iamdu2025-06-30 23:00:00明道云 浏览: 146
<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
联系站长
友情链接
其他入口
QQ与微信加好友
粤ICP备17018681号 站点地图 www.iamdu.com 版权所有 服务商提供:阿里云 Designed by :DU
本站部分资源内容来源于网络,若侵犯您的权益,请联系删除!