{"id":4899,"date":"2025-02-28T23:04:34","date_gmt":"2025-02-28T15:04:34","guid":{"rendered":"https:\/\/blog.odjbinail.cn\/?p=4899"},"modified":"2025-02-28T23:10:58","modified_gmt":"2025-02-28T15:10:58","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-%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e7%bb%84%e4%bb%b6%e7%9a%84%e8%b7%a8%e5%9f%9f%e9%97%ae","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=4899","title":{"rendered":"\u89e3\u51b3vue3\u9879\u76ee\u4f7f\u7528\u3010Element Plus\u3011\u4e2d el-upload \u4e0a\u4f20\u6587\u4ef6\u7ec4\u4ef6\u7684\u8de8\u57df\u95ee\u9898"},"content":{"rendered":"<h3>\u95ee\u9898<\/h3>\n<ul>\n<li>\u4e4b\u524d\u505a vue \u9879\u76ee\u4f7f\u7528 element \u7ec4\u4ef6\u4e00\u76f4\u5728\u672c\u5730\u548c\u670d\u52a1\u5668\u505a\u4ee3\u7406\uff0c\u6ca1\u6709\u6ce8\u610f\u5230 el-upload \u7ec4\u4ef6\u6709\u8de8\u57df\u95ee\u9898\uff0c\u8fd9\u6b21\u505a\u4e86\u4e00\u4e2a\u672c\u5730\u4e0d\u505a\u53cd\u5411\u4ee3\u7406\u7684\u9879\u76ee\u65f6\uff0c\u53d1\u73b0\u53ea\u6709\u4e0a\u4f20\u63a5\u53e3\u4f1a\u51fa\u73b0\u8de8\u57df\u95ee\u9898\u3002\u6700\u540e\u53d1\u73b0\u4e0d\u662f\u63a5\u53e3\u7684\u95ee\u9898 \uff0c\u662f el-upload \u7ec4\u4ef6\u81ea\u5e26\u7684\u8de8\u57df\u95ee\u9898\u3002<\/li>\n<li>\u7ec4\u4ef6\u5730\u5740: <a href=\"https:\/\/element-plus.org\/zh-CN\/component\/upload.html\">https:\/\/element-plus.org\/zh-CN\/component\/upload.html<\/a><\/li>\n<\/ul>\n<h3>\u89e3\u51b3\u529e\u6cd5<\/h3>\n<ul>\n<li>\u2460\u4f7f\u7528\u5728 http-request \u7684 function \u5185\uff0c\u7528 formData \u65b9\u5f0f\u4e0a\u4f20\uff0c\u53ef\u4ee5\u89e3\u51b3\u8de8\u57df\u95ee\u9898\u3002<\/li>\n<li>\u2461\u6216\u8005 \u53ef\u4ee5\u5728 before-upload \u65b9\u6cd5\u5185\u7528 formData \u65b9\u5f0f\u4e0a\u4f20 \u4e4b\u540e return \u3002<\/li>\n<li>\u5728\u6b64\u6211\u662f\u5728<strong>on-change<\/strong>\u83b7\u53d6 file\uff0c\u7136\u540e\u8c03\u7528\u4e0a\u4f20\u65b9\u6cd5\u3002<\/li>\n<\/ul>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/02\/2025022822395548.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/02\/2025022822395548.png\" alt=\"\" \/><\/p><\/noscript>\n<h3>\u4ee3\u7801<\/h3>\n<ul>\n<li>FileUpload.vue<\/li>\n<\/ul>\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             ref=&quot;fileUpload&quot;\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;;\n\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})\n\nconst fileUpload = ref()\nconst fileList = ref([])\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  singleUpload(fileList)\n}\nconst singleUpload = (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;));\n  uploadSingle(fd).then(res =&gt; {\n    if (res.code === 200) {\n      handleUploadSuccess(res)\n    } else {\n      ElMessage.error(res.msg)\n    }\n  }).catch(error =&gt; {\n    nextTick(() =&gt; {\n      fileUpload.value.clearFiles();\n    })\n    ElMessage.error(&#039;\u4e0a\u4f20\u6587\u4ef6\u5931\u8d25\uff1a\u8be5\u6587\u4ef6\u7c7b\u578b\u4e0d\u5141\u8bb8\u4e0a\u4f20&#039;)\n  });\n}\nconst handleUploadSuccess = (res) =&gt; {\n  ElNotification({\n    title: &#039;\u63d0\u793a&#039;,\n    message: res.msg,\n    type: &#039;success&#039;\n  })\n  emit(&quot;getFile&quot;, res.data)\n}\n&lt;\/script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u95ee\u9898 \u4e4b\u524d\u505a vue \u9879\u76ee\u4f7f\u7528 element \u7ec4\u4ef6\u4e00\u76f4\u5728\u672c\u5730\u548c\u670d\u52a1\u5668\u505a\u4ee3\u7406\uff0c\u6ca1\u6709\u6ce8\u610f\u5230 el-upload  [&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-4899","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4899","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=4899"}],"version-history":[{"count":8,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4899\/revisions"}],"predecessor-version":[{"id":4957,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/4899\/revisions\/4957"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}