{"id":3461,"date":"2024-03-14T08:39:11","date_gmt":"2024-03-14T00:39:11","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=3461"},"modified":"2026-08-27T09:31:05","modified_gmt":"2026-08-27T01:31:05","slug":"%e5%89%8d%e7%ab%af%e6%96%87%e4%bb%b6%e6%b5%81%e3%80%81%e5%88%87%e7%89%87%e4%b8%8b%e8%bd%bd%e5%92%8c%e4%b8%8a%e4%bc%a0%ef%bc%9a%e4%bc%98%e5%8c%96%e6%96%87%e4%bb%b6%e4%bc%a0%e8%be%93%e6%95%88%e7%8e%87","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=3461","title":{"rendered":"\u524d\u7aef\u6587\u4ef6\u6d41\u3001\u5207\u7247\u4e0b\u8f7d\u548c\u4e0a\u4f20\uff1a\u4f18\u5316\u6587\u4ef6\u4f20\u8f93\u6548\u7387\u4e0e\u7528\u6237\u4f53\u9a8c"},"content":{"rendered":"
\n

\u5927\u6587\u4ef6\u76f4\u63a5\u6574\u5305\u4f20\uff0c\u5bb9\u6613\u5361\u6b7b\u3001\u8d85\u65f6\u3001\u65ad\u4e86\u91cd\u6765\u3002\u524d\u7aef\u53ef\u7528 \u6587\u4ef6\u6d41<\/strong>\uff08Blob \/ ArrayBuffer \/ FileReader\uff09\u5904\u7406\u4e8c\u8fdb\u5236\uff0c\u518d\u7528 \u5207\u7247\u4e0a\u4f20 \/ \u5207\u7247\u4e0b\u8f7d<\/strong> \u63d0\u9ad8\u541e\u5410\u548c\u65ad\u70b9\u7eed\u4f20\u4f53\u9a8c\u3002<\/p>\n

\"\"<\/p>\n

\u6587\u4ef6\u4f20\u8f93\u662f\u5e38\u89c1\u9700\u6c42\u3002\u5927\u6587\u4ef6\u7528\u4f20\u7edf\u65b9\u5f0f\u4f1a\u78b0\u5230\u6027\u80fd\u548c\u4f53\u9a8c\u95ee\u9898\u3002\u4e0b\u9762\u6309\u6587\u4ef6\u6d41\u3001\u5207\u7247\u4e0b\u8f7d\u3001\u5927\u6587\u4ef6\u4e0a\u4f20\u4e0e\u65ad\u70b9\u7eed\u4f20\u3001\u5e94\u7528\u573a\u666f\u5c55\u5f00\uff0c\u793a\u4f8b\u6cbf\u7528\u539f\u6587 React \u4ee3\u7801\u3002<\/p>\n

\u4e00\u3001\u524d\u7aef\u6587\u4ef6\u6d41\u64cd\u4f5c<\/h2>\n

\u6587\u4ef6\u6d41\u662f\u7528\u6570\u636e\u6d41\u53bb \u8bfb\u53d6<\/code>\u3001\u5199\u5165<\/code>\u3001\u5c55\u793a<\/code> \u6587\u4ef6\u3002\u6570\u636e\u6d41\u662f\u8fde\u7eed\u6570\u636e\u5e8f\u5217\uff1b\u6587\u4ef6\u5904\u7406\u5305\u62ec\u8bfb\u5185\u5bb9\u3001\u5199\u6570\u636e\u3001\u5220\u9664\u548c\u91cd\u547d\u540d\u3002<\/p>\n

Blob \u4e0e ArrayBuffer<\/h3>\n

Blob<\/code>\uff08Binary Large Object\uff09\u8868\u793a\u5927\u5757\u4e8c\u8fdb\u5236\uff0c\u53ef\u7528\u6784\u9020\u51fd\u6570\u6216 FormData \u62ff\u5230\u7684\u6587\u4ef6\u751f\u6210\u3002ArrayBuffer<\/code> \u662f\u5b9a\u957f\u4e8c\u8fdb\u5236\u7f13\u51b2\u533a\uff0c\u7528\u6765\u64cd\u4f5c\u6587\u4ef6\u5b57\u8282\u3002<\/p>\n

import React, { useState } from 'react';\n\nfunction FileInput() {\n  const [fileContent, setFileContent] = useState('');\n\n  \/\/ \u8bfb\u53d6\u6587\u4ef6\u5185\u5bb9\u5230ArrayBuffer\n  function readFileToArrayBuffer(file) {\n    return new Promise((resolve, reject) => {\n      const reader = new FileReader();\n\n      \/\/ \u6ce8\u518c\u6587\u4ef6\u8bfb\u53d6\u5b8c\u6210\u540e\u7684\u56de\u8c03\u51fd\u6570\n      reader.onload = function(event) {\n        const arrayBuffer = event.target.result;\n        resolve(arrayBuffer);\n      };\n\n      \/\/ \u8bfb\u53d6\u6587\u4ef6\u5185\u5bb9\u5230ArrayBuffer\n      reader.readAsArrayBuffer(file);\n    });\n  }\n\n  \/\/ \u5c06ArrayBuffer\u8f6c\u4e3a\u5341\u516d\u8fdb\u5236\u5b57\u7b26\u4e32\n  function arrayBufferToHexString(arrayBuffer) {\n    const uint8Array = new Uint8Array(arrayBuffer);\n    let hexString = '';\n    for (let i = 0; i < uint8Array.length; i++) {\n      const hex = uint8Array[i].toString(16).padStart(2, '0');\n      hexString += hex;\n    }\n    return hexString;\n  }\n\n  \/\/ \u5904\u7406\u6587\u4ef6\u9009\u62e9\u4e8b\u4ef6\n  function handleFileChange(event) {\n    const file = event.target.files[0];  \/\/ \u83b7\u53d6\u9009\u4e2d\u7684\u6587\u4ef6\n\n    if (file) {\n      readFileToArrayBuffer(file)\n        .then(arrayBuffer => {\n          const hexString = arrayBufferToHexString(arrayBuffer);\n          setFileContent(hexString);\n        })\n        .catch(error => {\n          console.error('\u6587\u4ef6\u8bfb\u53d6\u5931\u8d25:', error);\n        });\n    } else {\n      setFileContent('\u8bf7\u9009\u62e9\u4e00\u4e2a\u6587\u4ef6');\n    }\n  }\n\n  return (\n    <div>\n      <input type=\"file\" onChange={handleFileChange} \/>\n      <div>\n        <h4>\u6587\u4ef6\u5185\u5bb9\uff1a<\/h4>\n        <pre>{fileContent}<\/pre>\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default FileInput;<\/code><\/pre>\n
FileInput<\/code> \u91cc\u7528\u6587\u4ef6\u9009\u62e9\u6846\u548c <pre><\/code> \u5c55\u793a\u5185\u5bb9\u3002\u9009\u4e2d\u540e FileReader.readAsArrayBuffer<\/code>\uff0c\u518d\u8f6c\u5341\u516d\u8fdb\u5236\u5b57\u7b26\u4e32\u663e\u793a\u3002<\/p>\n
FileReader<\/h3>\n
FileReader<\/code> \u5f02\u6b65\u8bfb\u6587\u4ef6\uff0c\u8f6c\u6210\u6587\u672c\u6216\u4e8c\u8fdb\u5236\u3002\u5e38\u7528 readAsText()<\/code>\u3001readAsArrayBuffer()<\/code>\u3002<\/p>\n
\u628a\u6587\u4ef6\u6d41\u5c55\u793a\u5230\u9875\u9762<\/h3>\n
\u6587\u672c\u53ef\u653e\u6587\u672c\u6846\uff1b\u56fe\u7247\u7528 <img><\/code>\uff1b\u97f3\u89c6\u9891\u7528 <video><\/code> \/ <audio><\/code>\uff0c\u5b9e\u73b0\u5728\u7ebf\u9884\u89c8\u3002<\/p>\n
\u5c0f\u7ed3\uff1a\u5927\u6587\u4ef6\u5e38\u7528\u6d41\u5f0f\u5904\u7406\u3002Blob<\/code> \/ ArrayBuffer<\/code> \u7ba1\u4e8c\u8fdb\u5236\uff0cFileReader<\/code> \u8d1f\u8d23\u8bfb\u5165\u3002<\/p>\n
\u4e8c\u3001\u6587\u4ef6\u5207\u7247\u4e0b\u8f7d<\/h2>\n
\u5148\u770b\u6574\u4f53\u6d41\u7a0b\uff1a<\/p>\n
\"\"<\/p>\n
\u4f20\u7edf\u4e0b\u8f7d\u7684\u95ee\u9898<\/h3>\n
\u5207\u7247\u4e0b\u8f7d\u628a\u5927\u6587\u4ef6\u5207\u6210\u5c0f\u6bb5\uff0c\u591a\u8bf7\u6c42\u5e76\u53d1\u62c9\uff0c\u52a0\u5feb\u6574\u4f53\u901f\u5ea6\u3002\u6574\u5305\u4e0b\u53d1\u4f1a\u78b0\u5230\uff1a<\/p>\n
    \n
  1. \n
    \u7b49\u5f85\u4e45\uff1a\u4f20\u5b8c\u624d\u80fd\u7528<\/section>\n<\/li>\n
  2. \n
    \u5360\u6ee1\u5e26\u5bbd\uff0c\u522b\u4eba\u66f4\u6162<\/section>\n<\/li>\n
  3. \n
    \u65ad\u70b9\u96be\uff1a\u7f51\u7edc\u6545\u969c\u6216\u7528\u6237\u4e2d\u65ad\u53ea\u80fd\u6574\u6587\u4ef6\u91cd\u6765<\/section>\n<\/li>\n<\/ol>\n
    \u5207\u7247\u5982\u4f55\u63d0\u901f<\/h3>\n
    \"\"<\/p>\n
    \u6bcf\u7247\u901a\u5e38\u51e0\u767e KB \u5230\u51e0 MB\uff0c\u5ba2\u6237\u7aef\u5e76\u53d1\u62c9\uff1a<\/p>\n
      \n
    1. \n
      \u5feb\u901f\u542f\u52a8\uff1a\u5148\u4e0b\u7b2c\u4e00\u7247\u5c31\u80fd\u5f00\u59cb<\/section>\n<\/li>\n
    2. \n
      \u5e76\u53d1\u5403\u6ee1\u5e26\u5bbd<\/section>\n<\/li>\n
    3. \n
      \u65ad\u70b9\u7eed\u4f20\uff1a\u53ea\u8865\u4e2d\u65ad\u7684\u90a3\u51e0\u7247<\/section>\n<\/li>\n<\/ol>\n
      \u5207\u7247\u4e0a\u4f20\u4ee3\u7801\u793a\u4f8b\uff1a<\/strong><\/p>\n
      const [selectedFile, setSelectedFile] = useState(null); \nconst [progress, setProgress] = useState(0);\n \/\/ \u5904\u7406\u6587\u4ef6\u9009\u62e9\u4e8b\u4ef6\n function handleFileChange(event) {\n   setSelectedFile(event.target.files[0]);\n }\n\n \/\/ \u5904\u7406\u6587\u4ef6\u4e0a\u4f20\u4e8b\u4ef6\n function handleFileUpload() {\n   if (selectedFile) {\n     \/\/ \u8ba1\u7b97\u5207\u7247\u6570\u91cf\u548c\u6bcf\u4e2a\u5207\u7247\u7684\u5927\u5c0f\n     const fileSize = selectedFile.size;\n     const chunkSize = 1024 * 1024; \/\/ \u8bbe\u7f6e\u5207\u7247\u5927\u5c0f\u4e3a1MB\n     const totalChunks = Math.ceil(fileSize \/ chunkSize);\n\n     \/\/ \u521b\u5efaFormData\u5bf9\u8c61\uff0c\u5e76\u6dfb\u52a0\u6587\u4ef6\u4fe1\u606f\n     const formData = new FormData();\n     formData.append('file', selectedFile);\n     formData.append('totalChunks', totalChunks);\n\n     \/\/ \u5faa\u73af\u4e0a\u4f20\u5207\u7247\n     for (let chunkNumber = 0; chunkNumber < totalChunks; chunkNumber++) {\n       const start = chunkNumber * chunkSize;\n       const end = Math.min(start + chunkSize, fileSize);\n       const chunk = selectedFile.slice(start, end);\n       formData.append(`chunk-${chunkNumber}`, chunk, selectedFile.name);\n     }\n\n     \/\/ \u53d1\u8d77\u6587\u4ef6\u4e0a\u4f20\u8bf7\u6c42\n     axios.post('\/upload', formData, {\n       onUploadProgress: progressEvent => {\n         const progress = Math.round((progressEvent.loaded \/ progressEvent.total) * 100);\n         setProgress(progress);\n       }\n     })\n       .then(response => {\n         console.log('\u6587\u4ef6\u4e0a\u4f20\u6210\u529f:', response.data);\n       })\n       .catch(error => {\n         console.error('\u6587\u4ef6\u4e0a\u4f20\u5931\u8d25:', error);\n       });\n   }\n }<\/code><\/pre>\n
      \u5207\u7247\u4e0a\u4f20\/\u4e0b\u8f7d\u4e00\u822c\u662f\u524d\u7aef\u6587\u4ef6 API + \u540e\u7aef\u914d\u5408\u3002\u4e0a\u9762\u8fd9\u6bb5\u5728\u8bb2\u5982\u4f55\u5207\u7247\u4e0a\u4f20\uff1a<\/p>\n
        \n
      • \n
        handleFileChange<\/code> \u628a\u9009\u4e2d\u6587\u4ef6\u5b58\u8fdb selectedFile<\/code><\/section>\n<\/li>\n
      • \n
        \u70b9\u4e0a\u4f20\u8d70 handleFileUpload<\/code><\/section>\n<\/li>\n
      • \n
        \u6309 1MB \u5207\u7247\uff0c\u7528 FormData<\/code> \u5e26\u4e0a\u6587\u4ef6\u4fe1\u606f\u548c\u5404\u7247\u6570\u636e<\/section>\n<\/li>\n<\/ul>\n
        \u5ba2\u6237\u7aef\u5207\u7247\u4e0b\u8f7d\u65b9\u6848<\/h3>\n
          \n
        1. \n
          \u670d\u52a1\u7aef\u5207\u5206\u5e76\u4e3a\u6bcf\u7247\u751f\u6210\u552f\u4e00\u6807\u8bc6<\/section>\n<\/li>\n
        2. \n
          \u5ba2\u6237\u7aef\u62ff\u5207\u7247\u5217\u8868\uff0c\u540c\u65f6\u5f00\u59cb\u4e0b\u7b2c\u4e00\u7247<\/section>\n<\/li>\n
        3. \n
          \u6309\u5217\u8868\u5e76\u53d1\u62c9\u5176\u4f59\u7247\u5e76\u62fc\u63a5<\/section>\n<\/li>\n
        4. \n
          \u5168\u90e8\u5b8c\u6210\u540e\u5408\u5e76\u6210\u5b8c\u6574\u6587\u4ef6<\/section>\n<\/li>\n<\/ol>\n
          function downloadFile() {\n  \/\/ \u53d1\u8d77\u6587\u4ef6\u4e0b\u8f7d\u8bf7\u6c42\n  fetch('\/download', {\n    method: 'GET',\n    headers: {\n      'Content-Type': 'application\/json',\n    },\n  })\n    .then(response => response.json())\n    .then(data => {\n      const totalSize = data.totalSize;\n      const totalChunks = data.totalChunks;\n\n      let downloadedChunks = 0;\n      let chunks = [];\n\n      \/\/ \u4e0b\u8f7d\u6bcf\u4e2a\u5207\u7247\n      for (let chunkNumber = 0; chunkNumber < totalChunks; chunkNumber++) {\n        fetch(`\/download\/${chunkNumber}`, {\n          method: 'GET',\n        })\n          .then(response => response.blob())\n          .then(chunk => {\n            downloadedChunks++;\n            chunks.push(chunk);\n\n            \/\/ \u5f53\u6240\u6709\u5207\u7247\u90fd\u4e0b\u8f7d\u5b8c\u6210\u65f6\n            if (downloadedChunks === totalChunks) {\n              \/\/ \u5408\u5e76\u5207\u7247\n              const mergedBlob = new Blob(chunks);\n\n              \/\/ \u521b\u5efa\u5bf9\u8c61 URL\uff0c\u751f\u6210\u4e0b\u8f7d\u94fe\u63a5\n              const downloadUrl = window.URL.createObjectURL(mergedBlob);\n\n              \/\/ \u521b\u5efa <a> \u5143\u7d20\u5e76\u8bbe\u7f6e\u5c5e\u6027\n              const link = document.createElement('a');\n              link.href = downloadUrl;\n              link.setAttribute('download', 'file.txt');\n\n              \/\/ \u6a21\u62df\u70b9\u51fb\u4e0b\u8f7d\n              link.click();\n\n              \/\/ \u91ca\u653e\u8d44\u6e90\n              window.URL.revokeObjectURL(downloadUrl);\n            }\n          });\n      }\n    })\n    .catch(error => {\n      console.error('\u6587\u4ef6\u4e0b\u8f7d\u5931\u8d25:', error);\n    });\n}<\/code><\/pre>\n
          \u7528 Blob<\/code> \u751f\u6210\u5bf9\u8c61 URL\uff0c\u52a8\u6001 <a><\/code> \u8bbe href<\/code> \u548c download<\/code>\uff0c\u518d\u6a21\u62df\u70b9\u51fb\u3002<\/p>\n
          \u8fdb\u5ea6\u548c\u5b8c\u6210\u6001<\/h3>\n
            \n
          1. \n
            \u542c\u6bcf\u7247\u8fdb\u5ea6\uff0c\u6c47\u603b\u540e\u66f4\u65b0\u8fdb\u5ea6\u6761<\/section>\n<\/li>\n
          2. \n
            \u5168\u90e8\u5b8c\u6210\u540e\u663e\u793a\u5b8c\u6210\u56fe\u6807\u6216\u6587\u6848<\/section>\n<\/li>\n<\/ol>\n
            \u53ef\u63a5\u5728\u5207\u7247\u4e0a\u4f20\u793a\u4f8b\u540e\u9762\uff1a<\/p>\n
              \/\/ \u5904\u7406\u6587\u4ef6\u4e0b\u8f7d\u4e8b\u4ef6\n  function handleFileDownload() {\n    axios.get('\/download', {\n      responseType: 'blob',\n      onDownloadProgress: progressEvent => {\n        const progress = Math.round((progressEvent.loaded \/ progressEvent.total) * 100);\n        setProgress(progress);\n      }\n    })\n      .then(response => {\n        \/\/ \u521b\u5efa\u4e00\u4e2a\u4e34\u65f6\u7684URL\u5bf9\u8c61\u7528\u4e8e\u4e0b\u8f7d\n        const url = window.URL.createObjectURL(new Blob([response.data]));\n        const link = document.createElement('a');\n        link.href = url;\n        link.setAttribute('download', 'file.txt');\n        document.body.appendChild(link);\n        link.click();\n        document.body.removeChild(link);\n      })\n      .catch(error => {\n        console.error('\u6587\u4ef6\u4e0b\u8f7d\u5931\u8d25:', error);\n      });\n  }\n  \n  \n  <button onClick={handleFileDownload}>\u4e0b\u8f7d\u6587\u4ef6<\/button>\n  <div>\u8fdb\u5ea6\uff1a{progress}%<\/div><\/code><\/pre>\n
              \n
            • \n
              \u70b9\u51fb\u4e0b\u8f7d\u8d70 handleFileDownload<\/code><\/section>\n<\/li>\n
            • \n
              axios<\/code> \u8bbe responseType: ‘blob’ \u62ff\u4e8c\u8fdb\u5236<\/section>\n<\/li>\n
            • \n
              onDownloadProgress<\/code> \u66f4\u65b0\u8fdb\u5ea6<\/section>\n<\/li>\n
            • \n
              \u5b8c\u6210\u540e createObjectURL<\/code> + <a download><\/code> \u89e6\u53d1\u4fdd\u5b58<\/section>\n<\/li>\n<\/ul>\n
              \u4e09\u3001\u5927\u6587\u4ef6\u4e0a\u4f20\uff1a\u95ee\u9898\u4e0e\u65b9\u6848<\/h2>\n
              \u4f20\u7edf\u4e0a\u4f20\u7684\u95ee\u9898<\/h3>\n
                \n
              • \n
                \u8017\u65f6\u957f\uff0c\u5bb9\u6613\u8d85\u65f6<\/section>\n<\/li>\n
              • \n
                \u5360\u670d\u52a1\u5668\u548c\u5e26\u5bbd\uff0c\u5f71\u54cd\u522b\u4eba<\/section>\n<\/li>\n
              • \n
                \u4e2d\u65ad\u5c31\u8981\u6574\u6587\u4ef6\u91cd\u4f20<\/section>\n<\/li>\n
              • \n
                \u8fdb\u5ea6\u4e0d\u597d\u5c55\u793a\u548c\u63a7\u5236<\/section>\n<\/li>\n<\/ul>\n
                \u5207\u7247\u4e0a\u4f20\u7684\u4f18\u52bf<\/h3>\n
                  \n
                • \n
                  \u5207\u5c0f\u7247\u591a\u6b21\u4f20\uff0c\u66f4\u7a33\u66f4\u5feb<\/section>\n<\/li>\n
                • \n
                  \u53ef\u76d1\u63a7\u8fdb\u5ea6<\/section>\n<\/li>\n
                • \n
                  \u5403\u6d4f\u89c8\u5668\u5e76\u53d1\uff0c\u51cf\u8f7b\u5355\u6b21\u538b\u529b<\/section>\n<\/li>\n
                • \n
                  \u65ad\u70b9\u7eed\u4f20\uff0c\u907f\u514d\u91cd\u590d\u4f20\u5df2\u5b8c\u6210\u90e8\u5206<\/section>\n<\/li>\n<\/ul>\n
                  \u5b9e\u73b0\u65b9\u6cd5<\/h3>\n
                    \n
                  • \n
                    File API<\/code> \u62ff\u6587\u4ef6\uff0cBlob.prototype.slice()<\/code> \u5207\u7247<\/section>\n<\/li>\n
                  • \n
                    FormData<\/code> + AJAX \/ Fetch \u53d1\u5230\u670d\u52a1\u5668<\/section>\n<\/li>\n
                  • \n
                    \u540e\u7aef\u6536\u7247\u8fdb\u4e34\u65f6\u5b58\u50a8\uff0c\u7a0d\u540e\u5408\u5e76<\/section>\n<\/li>\n
                  • \n
                    \u542c\u4e0a\u4f20\u8fdb\u5ea6\u4e8b\u4ef6\uff0c\u66f4\u65b0\u8fdb\u5ea6\u6761<\/section>\n<\/li>\n<\/ul>\n
                    const [file, setFile] = useState(null);  \/\/\u7528\u6765\u5b58\u653e\u6211\u672c\u5730\u4e0a\u4f20\u7684\u6587\u4ef6\n\nconst chunkSize = 1024 * 1024; \/\/ 1MB \u5207\u7247\u5927\u5c0f\n\n  const upload = () => {\n    if (!file) {\n      alert(\"\u8bf7\u9009\u62e9\u8981\u4e0a\u4f20\u7684\u6587\u4ef6\uff01\");\n      return;\n    }\n\n    const chunkSize = 1024 * 1024; \/\/ 1MB\n\n    let start = 0;\n    let end = Math.min(chunkSize, file.size);\n\n    while (start < file.size) {\n      const chunk = file.slice(start, end);\n      \n      \/\/ \u521b\u5efaFormData\u5bf9\u8c61\n      const formData = new FormData();\n      formData.append('file', chunk);\n\n      \/\/ \u53d1\u9001\u5207\u7247\u5230\u670d\u52a1\u5668\n      fetch('\u4e0a\u4f20\u63a5\u53e3xxxx', {\n        method: 'POST',\n        body: formData\n      })\n      .then(response => response.json())\n      .then(data => {\n        console.log(data);\n        \/\/ \u5904\u7406\u54cd\u5e94\u7ed3\u679c\n      })\n      .catch(error => {\n        console.error(error);\n        \/\/ \u5904\u7406\u9519\u8bef\n      });\n\n      start = end;\n      end = Math.min(start + chunkSize, file.size);\n    }\n  };\n  \n return (\n    <div>\n      <input type=\"file\" onChange={handleFileChange} \/>\n      <button onClick={upload}>\u4e0a\u4f20<\/button>\n    <\/div>\n  );\n}<\/code><\/pre>\n
                    Upload<\/code> \u7528 useState<\/code> \u7ba1\u9009\u4e2d\u6587\u4ef6\uff1bonChange<\/code> \u91cc\u66f4\u65b0 file<\/code>\u3002\u70b9\u4e0a\u4f20\u540e\u6309\u56fa\u5b9a\u5927\u5c0f\u5207\u7247\uff0cFormData<\/code> + fetch<\/code> \u9010\u7247\u53d1\u9001\u3002<\/p>\n
                    \u65ad\u70b9\u7eed\u4f20\uff1a\u8bb0\u4e0b\u5e76\u6062\u590d\u72b6\u6001<\/h3>\n