Update index.js

index.js

@@ -2,7 +2,6 @@ const express = require('express');
 const multer = require('multer');
 const JSZip = require('jszip');
 const { createCanvas } = require('canvas');
-const fs = require('fs');
 const app = express();
 
 // 设置 multer 用于处理文件上传
@@ -30,35 +29,32 @@ app.get('/', (req, res) => {
         </form>
         <script>
             document.getElementById('uploadForm').addEventListener('submit', async (event) => {
-    event.preventDefault();
-    const formData = new FormData(event.target);
-    const response = await fetch(event.target.action, {
-        method: 'POST',
-        body: formData
-    });
-
-    if (response.ok) {
-        // 假设服务器返回的是一个可下载的文件
-        response.blob().then(blob => {
-            // 创建一个链接元素
-            const url = window.URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.style.display = 'none';
-            a.href = url;
-            // 从Content-Disposition头中提取文件名
-            const contentDisposition = response.headers.get('Content-Disposition');
-            const fileName = contentDisposition.match(/filename="(.+)"/)[1];
-            a.download = fileName;
-            document.body.appendChild(a);
-            a.click();
-            window.URL.revokeObjectURL(url);
-            alert('File downloaded successfully!');
-        });
-    } else {
-        alert('Failed to upload file.');
-    }
-});
-
+                event.preventDefault();
+                const formData = new FormData(event.target);
+                const response = await fetch(event.target.action, {
+                    method: 'POST',
+                    body: formData
+                });
+                if (response.ok) {
+                    response.blob().then(blob => {
+                        const url = window.URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.style.display = 'none';
+                        a.href = url;
+                        // 从Content-Disposition头中提取文件名
+                        const contentDisposition = response.headers.get('Content-Disposition');
+                        const filenameMatch = contentDisposition.match(/filename\*=UTF-8''(.+)/);
+                        const fileName = filenameMatch ? decodeURIComponent(filenameMatch[1]) : 'downloaded.zip';
+                        a.download = fileName;
+                        document.body.appendChild(a);
+                        a.click();
+                        window.URL.revokeObjectURL(url);
+                        alert('File downloaded successfully!');
+                    });
+                } else {
+                    alert('Failed to upload file.');
+                }
+            });
         </script>
     </body>
     </html>
@@ -72,11 +68,6 @@ app.post('/upload', upload.single('file'), async (req, res) => {
     const fileType = file.mimetype;
     const fileBuffer = file.buffer;
 
-    // 输出接收到的文件信息
-    console.log(`File Name: ${fileName}`);
-    //console.log(`File Type: ${fileType}`);
-    //console.log(`File Size: ${fileBuffer.length} bytes`);
-
     // 压缩文件成 zip 格式
     const zip = new JSZip();
     zip.file(fileName, fileBuffer);
@@ -87,38 +78,24 @@ app.post('/upload', upload.single('file'), async (req, res) => {
     const height = 300;
     const canvas = createCanvas(width, height);
     const ctx = canvas.getContext('2d');
-
-    // 设置背景为白色
     ctx.fillStyle = '#FFFFFF';
     ctx.fillRect(0, 0, width, height);
-
-    // 设置文本颜色为黑色，并绘制文本
     ctx.fillStyle = '#000000';
     ctx.font = '20px Arial';
     const text = `
       File Name: ${fileName}
-      
       File Type: ${fileType}
-      
       File Size: ${fileBuffer.length} bytes
-      
       Created At: ${new Date().toLocaleString()}
-      
     `;
-    ctx.fillText(text.trim(), 5, 100);
-
-    // 将 canvas 转换为 JPEG 图片
+    ctx.fillText(text.trim(), 10, 100);
     const rawImageData = canvas.toBuffer('image/jpeg', { quality: 0.75 });
-
-    // 将包含信息的图片和生成的 zip 打包
     const finalBuffer = Buffer.concat([rawImageData, zipBuffer]);
+    const outputFileName = encodeURIComponent(fileName.replace(/\.[^/.]+$/, "") + '-piczip.jpg');
 
-    // 生成新的文件名，添加后缀 -piczip
-    const outputFileName = fileName.replace(/\.[^/.]+$/, "") + '-piczip.jpg';
-
-    // 返回新的隐藏 zip 文件的新图片文件
+    // 使用RFC 5987编码标准设置Content-Disposition头
     res.setHeader('Content-Type', 'image/jpeg');
-    res.setHeader('Content-Disposition', `attachment; filename="${outputFileName}"`);
+    res.setHeader('Content-Disposition', `attachment; filename*=UTF-8''${outputFileName}`);
     res.send(finalBuffer);
   } catch (error) {
     console.error(error);