{"id":1081,"date":"2022-10-09T14:21:00","date_gmt":"2022-10-09T06:21:00","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=1081"},"modified":"2022-10-18T16:06:55","modified_gmt":"2022-10-18T08:06:55","slug":"vuevant3%e4%b8%8a%e4%bc%a0%e5%9b%be%e7%89%87%e8%87%b3oss-%e5%9b%be%e7%89%87%e5%b1%95%e7%a4%ba","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=1081","title":{"rendered":"vue3+vant3\u4e0a\u4f20\u56fe\u7247\u81f3oss-\u56fe\u7247\u5c55\u793a"},"content":{"rendered":"\n<p>\u524d\u6bb5\u65f6\u95f4\u641e\u4e86\u4e00\u4e0b\u8fd9\u5757\uff0c\u628a\u5b66\u4e60\u5185\u5bb9\u5199\u51fa\u6765 \u8bb0\u5f55\u907f\u514d\u81ea\u5df1\u5fd8\u8bb0<\/p>\n\n\n\n<p>\u9996\u5148\u770b\u4e0bvant\u5b98\u7f51\u4e0a\u4f20\u7ec4\u4ef6\u7684 \u5730\u5740\uff1a  https:\/\/vant-contrib.gitee.io\/vant\/#\/zh-CN\/uploader<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p> <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-2-1024x635.png\" alt=\"\" class=\"wp-image-1082\" width=\"335\" height=\"207\" srcset=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-2-1024x635.png 1024w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-2-300x186.png 300w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-2-768x476.png 768w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-2-1536x953.png 1536w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-2.png 1654w\" sizes=\"(max-width: 335px) 100vw, 335px\" \/><\/figure>\n\n\n\n<p>\u53c2\u8003\u7ec4\u4ef6\u5e93\u7684\u4ee3\u7801 \u5c1d\u8bd5\u540e\u53d1\u73b0\u80fd\u62ff\u5230\u4e0a\u4f20\u56fe\u7247\u7684\u8fd4\u56de \u4fe1\u606f\uff0c<\/p>\n\n\n\n<p>\u5176\u4e2d\u5305\u542b\u4e86 \u56fe\u7247\u540d\u5b57\uff0c\u56fe\u7247\u540d\u79f0\uff0c\u56fe\u7247\u961f\u5217\u5185\u5bb9\u76f8\u5173\u3002<\/p>\n\n\n\n<p>\u8fd9\u5757\u8fd8\u9700\u8981\u6539\u52a8\u4e00\u4e0b \uff0c\u6ca1\u6cd5\u76f4\u63a5\u62ff\u6765\u7528 \uff0c\u76f4\u63a5\u770b\u4e0b\u4ee3\u7801\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>index.vue<\/strong>\n\n&lt;van-uploader v-model=\"fileImg\" :after-read=\"afterRead\" v-if=\"uploadState\" :preview-image=\"false\"\n   accept=\"image\/*\" :max-size=\"10 * 1024 * 1024\" class=\"upload-opacity\">\n     &lt;img :src=\"uploadBtn\" class=\"upload-icon\" \/>\n&lt;\/van-uploader>\n\n data() {\n    return {\n      fileImg: &#91;],\n      uploadState: false,\n    }\n  },\n\nmethod:{\nasync afterRead(file) {\n      const { type, name, size } = file?.file;\n      const par = {\n        file_source: \"xcx-task\",\n        file_name: name,\n        file_memo: name,\n        file_type: type,\n        file_size: size,\n        relation_id: this.patiendValue,\n        file: file.file,\n      };\n      const { fileUrl } = await useUpload(par); \/\/ \u62ff\u5230\u6587\u4ef6\u7684\u4fe1\u606f\n      let imgUrl = fileUrl.value;\n      \/\/ console.log(\"fileUrl\", imgUrl);\n      this.pageNum = 1;\n      this.listOnLoad()\n    },\n}\n\n<strong>useUpload.ts<\/strong>\n\nimport {ref} from 'vue'\nimport {uploadApi} from '@\/service\/common'\nimport { Toast } from 'vant';\n\nexport default async function useUpload(data:any) {\n  \n  const fileUrl = ref('')\n  const videoImage = ref('')\n  let res\n  try{\n     res = await uploadApi(data) \/\/\u8bf7\u6c42\u963f\u91cc\u4e91\u63a5\u53e3\u8fd4\u56de\u7684\u5bf9\u8c61\u53c2\u6570 \uff0c\u5305\u542burl\uff0c\u56fe\u7247\uff0c\u89c6\u9891\uff0c\u540d\u79f0\uff0c\u65f6\u95f4\uff0c\u7b49\u7b49\u3002\n  }catch (e){\n    Toast('\u7f51\u7edc\u5f02\u5e38\uff0c\u8bf7\u91cd\u65b0\u4e0a\u4f20')\n  }\n \n  \n  if(!res){\n    return {fileUrl:'', videoImage:''}\n  }\n  fileUrl.value = res?.sign_url\n  videoImage.value = res?.video_image || ''\n  return {fileUrl, videoImage}\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u6bb5\u65f6\u95f4\u641e\u4e86\u4e00\u4e0b\u8fd9\u5757\uff0c\u628a\u5b66\u4e60\u5185\u5bb9\u5199\u51fa\u6765 \u8bb0\u5f55\u907f\u514d\u81ea\u5df1\u5fd8\u8bb0 \u9996\u5148\u770b\u4e0bvant\u5b98\u7f51\u4e0a\u4f20\u7ec4\u4ef6\u7684 \u5730\u5740\uff1a https: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41],"tags":[38],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1081"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1081"}],"version-history":[{"count":2,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1081\/revisions"}],"predecessor-version":[{"id":1084,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1081\/revisions\/1084"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1081"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}