当前位置：首页 > news >正文

#Js篇：两个前端应用通过postMessage传递file对像 URL.createObjectURL+fetch

news 来源：原创 2025/5/31 14:18:03

方案一通过postMessage传递

A前端发送

const onSendFile = () => {const targetWindow = window.open('http://10.28.105.231:9090');if (targetWindow) {setTimeout(() => {targetWindow.postMessage({ selectedFile: selectedFile.value }, '*');console.log(selectedFile.value);}, 500); // 延迟确保页面加载完成} else {alert('弹出窗口被浏览器拦截，请允许弹出窗口');}
}

B前端接收

    <script>console.log(1111);alert(1111)window.addEventListener('message', (event) => {console.log('event: ', event);console.log(666,event.data); // { id: '123', name: 'Alice' }alert(JSON.stringify(event.data));});</script>

方案二通过url

A前端发送

 onSendFile() {try {alert(111)const fileURL = URL.createObjectURL(selectedFile.value);console.log(`http://*****:8080#/?file=${encodeURIComponent(fileURL)}`)alert(2222)await dingtalkUtils.navigateToPage(` http://****:8080?file=${encodeURIComponent(fileURL)}&name=${selectedFile.value.name}&type=${selectedFile.value.type}`)} catch (error) {console.log(error)}}

B前端接收

配置跨域

  const params = new URLSearchParams(window.location.search);console.log(params)let file = params.get('file')'let name = params.get('name')let type = params.get('type')let proxy = params.get('proxy')const fileUrl = '/test-api/' + file?.split('/').pop()console.log('fileUrl--999: ', fileUrl);if (file) {// 2. 使用 fetch 获取文件数据//blob:http://10.28.118.4:8080/test-api/979da095-614a-4f2b-98df-3af807645579 fetch(fileUrl).then((response) => response.blob()).then((blob) => {// 3. 重新构造 File 对象（需要知道文件名和类型）const fileName = name as string; // 需要从 A 轻应用传递文件名const fileType = type as string; // 需要从 A 轻应用传递文件类型// 如果 A 轻应用能传递文件名和类型，可以这样：// const fileName = params.get('fileName');// const fileType = params.get('fileType');const newFile = new File([blob], fileName, { type: fileType });console.log('接收到的 File 对象9999:', newFile);console.log('接收到的 File 对象:', newFile.name);console.log('接收到的 File 对象9999:', newFile.type);// 4. 使用 newFile（如上传、预览等）}).catch((error) => {console.error('获取文件失败999:', error);});}