{"id":4958,"date":"2025-03-16T21:26:35","date_gmt":"2025-03-16T13:26:35","guid":{"rendered":"https:\/\/blog.odjbinail.cn\/?p=4958"},"modified":"2025-03-16T21:27:22","modified_gmt":"2025-03-16T13:27:22","slug":"%e8%a7%a3%e5%86%b3vue3%e9%a1%b9%e7%9b%ae%e4%bd%bf%e7%94%a8%e3%80%90element-plus%e3%80%91%e4%b8%ad-el-upload-%e5%a4%a7%e6%96%87%e4%bb%b6%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=4958","title":{"rendered":"\u89e3\u51b3vue3\u9879\u76ee\u4f7f\u7528\u3010Element Plus\u3011\u4e2d el-upload \u5927\u6587\u4ef6\u5206\u7247\u4e0a\u4f20"},"content":{"rendered":"<h2>\u7248\u672c\u8bf4\u660e<\/h2>\n<ul>\n<li>&quot;vue&quot;: &quot;^3.3.4&quot;,<\/li>\n<li>&quot;element-plus&quot;: &quot;^2.3.8&quot;<\/li>\n<\/ul>\n<p>\u8fd9\u91cc\u4e3b\u8981\u4f7f\u7528 el-upload \u4e2d\u7684:on-change=&quot;handleChange&quot; \u5c31\u53ef\u4ee5\u5b9e\u73b0<\/p>\n<h2>\u4ee3\u7801<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n  &lt;el-upload :file-list=&quot;value&quot;\n             action=&quot;#&quot;\n             drag\n             :limit=&quot;maxSize&quot;\n             with-credentials\n             :multiple=&quot;multiple&quot;\n             :auto-upload=&quot;false&quot;\n             :show-file-list=&quot;showFileList&quot;\n             :on-change=&quot;handleChange&quot;\n  &gt;\n    &lt;el-icon class=&quot;el-icon--upload&quot;&gt;\n      &lt;upload-filled\/&gt;\n    &lt;\/el-icon&gt;\n    &lt;div class=&quot;el-upload__text&quot;&gt;\n      &lt;em&gt;\u70b9\u51fb\u4e0a\u4f20&lt;\/em&gt;\u6216\u8005\u5c06\u6587\u4ef6\u62d6\u62fd\u5230\u865a\u7ebf\u6846\u5185\u4e0a\u4f20\u6587\u4ef6\n    &lt;\/div&gt;\n  &lt;\/el-upload&gt;\n&lt;\/template&gt;\n\n&lt;script setup&gt;\nimport {ElMessage, ElMessageBox, ElNotification} from &quot;element-plus&quot;;\nimport {getToken} from &#039;@\/utils\/auth&#039;\nimport {getUploadUrl, uploadSingle} from &quot;@\/api\/home&quot;;\nconst headers = reactive({\n  authorization: getToken(), \/\/token\n  &#039;Access-Control-Allow-Origin&#039;: &quot;*&quot;,\n  &#039;access-control-allow-headers&#039;: &#039;token, Origin, X-Requested-With, Content-Type, Accept, Authorization&#039;,\n  &#039;access-control-allow-methods&#039;: &#039; POST,GET,PUT,DELETE,HEAD,OPTIONS,PATCH&#039;,\n  &#039;access-control-allow-origin&#039;: &#039;*&#039;,\n  &#039;Access-Control-Origin&#039;: &#039;https:\/\/xxx.xx.com&#039;\n})\nconst props = defineProps({\n  value: {\n    type: Array,\n    default: () =&gt; {\n      return []\n    }\n  },\n  maxSize: {\n    type: Number,\n    default: 1\n  },\n  showFileList: {\n    type: Boolean,\n    default: false\n  },\n  multiple: {\n    type: Boolean,\n    default: false\n  }\n})\nconst handleChange = (file, fileList) =&gt; {\n  handleUpload(fileList)\n}\n\/**\n * \u5224\u65ad\u6587\u4ef6\u5927\u5c0f, \u8c03\u53d6\u4e0d\u540c\u63a5\u53e3\u4e0a\u4f20\n * @param fileList \u6587\u4ef6\u5217\u8868\n *\/\nconst handleUpload = (fileList) =&gt; {\n  \/\/\u5982\u679c\u6587\u4ef6\u5c0f\u4e8e 1M, \u76f4\u63a5\u4e0a\u4f20\n  let fd = new FormData();\n  fileList.forEach(item =&gt; {\n    fd.append(&quot;file&quot;, item.raw);\n  })\n  fd.append(&quot;uid&quot;, localStorage.getItem(&#039;uid&#039;));\/\/\u63a5\u53e3\u53c2\u6570\n  if (fileList[0].size &lt; chunkRef.value) {\n    \/\/singleUpload(fd)\/\/\u5c0f\u6587\u4ef6\u76f4\u63a5\u4e0a\u4f20\u65b9\u6cd5\n  } else {\n\/\/ \u5982\u679c\u6587\u4ef6\u5927\u4e8e\u7b49\u4e8e 5MB\uff0c\u5206\u7247\u4e0a\u4f20\n    uploadByPieces(fileList[0])\n  }\n}\n\/**\n * \u5927\u6587\u4ef6\u4e0a\u4f20\u63a5\u53e3\n * @param data \u63a5\u53e3\u53c2\u6570\n *\/\nconst uploadChunk = (data) =&gt; {\n  return new Promise((resolve, reject) =&gt; {\n    uploadMultiple(data).then(res =&gt; {\n      return resolve(res)\n    }).catch(error =&gt; {\n      return reject(error)\n    });\n  })\n}\n\n\/**\n * \u83b7\u53d6\u6587\u4ef6\u5206\u5757\u4fe1\u606f\n * @param file \u6587\u4ef6\u5bf9\u8c61\uff0c\u5305\u542b\u6587\u4ef6\u7684\u539f\u59cb\u4fe1\u606f\u548c\u539f\u59cb\u5185\u5bb9\n * @param index \u5206\u5757\u7d22\u5f15\uff0c\u7528\u4e8e\u786e\u5b9a\u5f53\u524d\u662f\u7b2c\u51e0\u4e2a\u5206\u5757\n * @returns {{start: number, chunk: *, end: number}}\n *\/\nconst getChunkInfo = (file, index) =&gt; {\n  \/\/ \u4e0a\u4f20\u8fc7\u7a0b\u4e2d\u7528\u5230\u7684\u53d8\u91cf\n  const chunkSize = chunkRef.value;\n  \/\/\u8ba1\u7b97\u5f53\u524d\u5206\u5757\u7684\u8d77\u59cb\u4f4d\u7f6e\n  let start = index * chunkSize;\n  \/\/ \u8ba1\u7b97\u5f53\u524d\u5206\u5757\u7684\u7ed3\u675f\u4f4d\u7f6e\uff0c\u786e\u4fdd\u4e0d\u8d85\u8fc7\u6587\u4ef6\u603b\u5927\u5c0f\n  let end = Math.min(file.size, start + chunkSize);\n  \/\/ \u4ece\u6587\u4ef6\u4e2d\u5207\u5206\u51fa\u5f53\u524d\u5206\u5757\u7684\u5185\u5bb9\n  let chunk = file.raw.slice(start, end);\n  \/\/ \u8fd4\u56de\u5f53\u524d\u5206\u5757\u7684\u8d77\u59cb\u4f4d\u7f6e\u3001\u7ed3\u675f\u4f4d\u7f6e\u548c\u5206\u5757\u5185\u5bb9\n  return {start, end, chunk};\n};\n\n\/**\n * \u5f02\u6b65\u5904\u7406\u4e0a\u4f20\u961f\u5217\u4e2d\u7684\u6587\u4ef6\n * @returns {Promise&lt;void&gt;}\n *\/\nasync function processUploadQueue() {\n  \/\/ \u68c0\u67e5\u662f\u5426\u6709\u6587\u4ef6\u6b63\u5728\u4e0a\u4f20\uff0c\u5982\u679c\u6709\uff0c\u5219\u4e0d\u6267\u884c\u4efb\u4f55\u64cd\u4f5c\n  if (isUploading) {\n    return;\n  }\n  isUploading = true;\n  \/\/ \u5f53\u4e0a\u4f20\u961f\u5217\u4e2d\u6709\u6587\u4ef6\u65f6\uff0c\u5faa\u73af\u5904\u7406\u961f\u5217\u4e2d\u7684\u6587\u4ef6\n  while (uploadQueue.length &gt; 0) {\n    \/\/ \u4ece\u961f\u5217\u4e2d\u53d6\u51fa\u7b2c\u4e00\u4e2a\u6587\u4ef6\u7684\u4e0a\u4f20\u4fe1\u606f\n    const {resolve, reject, fetchForm} = uploadQueue.shift();\n    try {\n      const res = await uploadChunk(fetchForm);\n      console.log(res, &#039;vs&#039;);\n      if (res.code === 200) {\n        res.success = true\n      }\n      \/\/ \u5047\u8bbe\u4e0a\u4f20\u6210\u529f\n      resolve(res.success); \/\/ \u8fd4\u56de true \u8868\u793a\u6210\u529f\n    } catch (error) {\n      reject(error);\n    }\n  }\n  isUploading = false;\n}\n\n\/**\n * \u8bfb\u53d6\u6587\u4ef6\u5757\u5e76\u6dfb\u52a0\u5230\u4e0a\u4f20\u961f\u5217\u4e2d\n * \u8be5\u51fd\u6570\u5c06\u7ed9\u5b9a\u6587\u4ef6\u5206\u5272\u6210\u591a\u4e2a\u5757\uff0c\u5e76\u5c06\u6307\u5b9a\u7d22\u5f15\u7684\u5757\u6dfb\u52a0\u5230\u4e0a\u4f20\u961f\u5217\u4e2d\n * \u5b83\u4f7f\u7528\u5f02\u6b65\u65b9\u5f0f\u8bfb\u53d6\u6587\u4ef6\u5757\uff0c\u5e76\u5728\u8bfb\u53d6\u5b8c\u6210\u540e\u5904\u7406\u4e0a\u4f20\u903b\u8f91\n * @param {File} file - \u8981\u4e0a\u4f20\u7684\u6587\u4ef6\u5bf9\u8c61\n * @param {number} index - \u5f53\u524d\u6587\u4ef6\u5757\u7684\u7d22\u5f15\n * @param {number} chunkCount - \u6587\u4ef6\u5757\u7684\u603b\u6570\n *\/\nconst readChunk = (file, index, chunkCount) =&gt; {\n  return new Promise(async (resolve, reject) =&gt; {\n    const {chunk} = getChunkInfo(file, index);\n    \/\/ \u521b\u5efa FormData \u5bf9\u8c61\u4ee5\u51c6\u5907\u4e0a\u4f20\u7684\u6570\u636e\n    let fetchForm = new FormData();\n    fetchForm.append(&quot;file&quot;, chunk);\n    fetchForm.append(&quot;index&quot;, index);\n    fetchForm.append(&quot;chunkCount&quot;, chunkCount);\n    fetchForm.append(&quot;fileName&quot;, file.name);\n    \/\/ \u5c06\u4efb\u52a1\u6dfb\u52a0\u5230\u961f\u5217\u4e2d\n    uploadQueue.push({resolve, reject, fetchForm});\n    \/\/ \u5982\u679c\u961f\u5217\u4e2d\u53ea\u6709\u4e00\u4e2a\u4efb\u52a1\uff0c\u5219\u5f00\u59cb\u5904\u7406\n    processUploadQueue();\n  });\n};\n\nconst uploadByPieces = async (file) =&gt; {\n  const chunkCount = Math.ceil(file.size \/ (chunkRef.value)); \/\/ \u603b\u7247\u6570\n  \/\/ \u9488\u5bf9\u5355\u4e2a\u6587\u4ef6\u8fdb\u884c chunk \u4e0a\u4f20\n\n  \/\/ \u9488\u5bf9\u6bcf\u4e2a\u6587\u4ef6\u8fdb\u884c chunk \u5904\u7406\n  const promiseList = []\n  for (let index = 0; index &lt; chunkCount; ++index) {\n    promiseList.push(readChunk(file, index, chunkCount))\n  }\n  \/\/ \u4f7f\u7528 Promise.all \u7b49\u5f85\u6240\u6709 readChunk \u8c03\u7528\u5b8c\u6210\n  Promise.all(promiseList).then((res) =&gt; {\n    \/\/ \u6240\u6709 readChunk \u8c03\u7528\u5b8c\u6210\u540e\uff0c\u8c03\u7528 getUploadUrl\n    if (res.every(item =&gt; item === true)) {\n      ElNotification({\n        title: &#039;\u63d0\u793a&#039;,\n        message: &#039;\u6587\u4ef6\u4e0a\u4f20\u6210\u529f&#039;,\n        type: &#039;success&#039;\n      })\n    }\n  }).catch(err =&gt; {\n    console.error(&#039;Error reading chunks:&#039;, err);\n  });\n}\n\n&lt;\/script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u7248\u672c\u8bf4\u660e &quot;vue&quot;: &quot;^3.3.4&quot;, &quot;element [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4958","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4958"}],"version-history":[{"count":7,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4958\/revisions"}],"predecessor-version":[{"id":4965,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4958\/revisions\/4965"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}