{"id":1054,"date":"2023-03-12T10:10:41","date_gmt":"2023-03-12T02:10:41","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1054"},"modified":"2023-04-29T12:39:28","modified_gmt":"2023-04-29T04:39:28","slug":"vue-js-real-time-update-of-upload-progress-using-axios","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/12\/vue-js-real-time-update-of-upload-progress-using-axios\/","title":{"rendered":"Vue.js\u4e2d\u5229\u7528axios\u5b9e\u73b0\u6587\u4ef6\u4e0a\u4f20\u8fdb\u5ea6\u5b9e\u65f6\u66f4\u65b0"},"content":{"rendered":"

XHR\u4e8c\u7ea7\u589e\u52a0\u4e86progress\u4e8b\u4ef6\uff0c\u6211\u4eec\u53ef\u4ee5\u636e\u6b64\u5728\u6d4f\u89c8\u5668\u63a5\u6536\u65b0\u6570\u636e\u671f\u95f4\u6dfb\u52a0\u5b9e\u65f6\u6570\u636e\u8fdb\u5ea6\u6761\uff0c\u4ece\u800c\u4f7f\u5f97\u4ea4\u4e92\u66f4\u52a0\u53cb\u597d<\/p>\n

Vue\u6a21\u677f<\/h3>\n
<div class="progress" @click="upload"\n    :style="{backgroundImage:'linear-gradient(to right,#C0C7CB 0%,#C0C7CB ' + progress + ',#E1E6E9 ' + progress + ',#E1E6E9 100%)'}"><\/code><\/pre>\n
<\/p>\n
Vue JavaScript<\/h3>\n
var form = new FormData()\nform.append('file', vm.$refs.upload.files[0])\nform.append('name', name)\nvar config = {\n  onUploadProgress: progressEvent => {\n    var complete = (progressEvent.loaded \/ progressEvent.total * 100 | 0) + '%'\n    this.progress = complete\n  },\n  headers: {\n    'Content-Type': 'multipart\/form-data'\n  }\n}\naxios.post(`api\/upload_file`,\n  form, config).then((res) => {\n  if (res.data.status === 'success') {\n    console.log('\u4e0a\u4f20\u6210\u529f')\n  }\n})<\/code><\/pre>\n
\u5173\u952e\u70b9\u5728\u4e8eprogress\u4e8b\u4ef6\uff0c\u800caxios\u5bf9ajax\u5c01\u88c5\u4e4b\u540e\u9700\u8981\u5728axios\u7684config\u53c2\u6570\u91cc\u9762\u5b9a\u4e49\u4e8b\u4ef6\u5904\u7406\u51fd\u6570<\/p>\n","protected":false},"excerpt":{"rendered":"
XHR\u4e8c\u7ea7\u589e\u52a0\u4e86progress\u4e8b\u4ef6\uff0c\u6211\u4eec\u53ef\u4ee5\u636e\u6b64\u5728\u6d4f\u89c8\u5668\u63a5\u6536\u65b0\u6570\u636e\u671f\u95f4\u6dfb\u52a0\u5b9e\u65f6\u6570\u636e\u8fdb\u5ea6\u6761\uff0c\u4ece\u800c\u4f7f\u5f97\u4ea4\u4e92\u66f4\u52a0\u53cb […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[290],"class_list":["post-1054","post","type-post","status-publish","format-standard","hentry","category-vue","tag-axios"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1054"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1054\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}