获取学习路径列表

src/views/system/SystemManage.vue

@@ -24,20 +24,50 @@
       <add-vote v-model:addvoteVisible="visible" />
     </div>
     <a-radio v-model:checked="checked" @click="changeRadio">Option A</a-radio>
+    <a-upload
+      v-model:file-list="fileList"
+      name="avatar"
+      list-type="picture-card"
+      class="avatar-uploader"
+      :show-upload-list="false"
+      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+      :before-upload="beforeUpload"
+      @change="handleChange"
+    >
+      <!-- <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
+      <div v-else>
+        <loading-outlined v-if="loading"></loading-outlined>
+        <plus-outlined v-else></plus-outlined>
+        <div class="ant-upload-text">Upload</div>
+      </div> -->
+    </a-upload>
   </div>
 </template>
 <script>
 import { reactive, toRefs } from "vue";
 import AddVote from "../../components/drawers/AddVote";
+// import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
+import { message } from "ant-design-vue";
+
+function getBase64(img, callback) {
+  const reader = new FileReader();
+  reader.addEventListener("load", () => callback(reader.result));
+  reader.readAsDataURL(img);
+}
 export default {
   name: "SystemManage",
   components: {
     AddVote,
+    // LoadingOutlined,
+    // PlusOutlined,
   },
   setup() {
     const state = reactive({
       visible: false,
       checked: true,
+      imageUrl: "",
+      loading: false,
+      fileList: [],
     });
 
     const showDrawer = () => {
@@ -46,10 +76,49 @@ export default {
     const changeRadio = () => {
       state.checked = false;
     };
+    const handleChange = (info) => {
+      if (info.file.status === "uploading") {
+        state.loading = true;
+        return;
+      }
+
+      if (info.file.status === "done") {
+        // Get this url from response in real world.
+        getBase64(info.file.originFileObj, (base64Url) => {
+          state.imageUrl = base64Url;
+          state.loading = false;
+        });
+      }
+
+      if (info.file.status === "error") {
+        state.loading = false;
+        message.error("upload error");
+      }
+    };
+
+    const beforeUpload = (file) => {
+      const isJpgOrPng =
+        file.type === "image/jpeg" || file.type === "image/png";
+
+      if (!isJpgOrPng) {
+        message.error("You can only upload JPG file!");
+      }
+
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isLt2M) {
+        message.error("Image must smaller than 2MB!");
+      }
+
+      return isJpgOrPng && isLt2M;
+    };
+
     return {
       ...toRefs(state),
       showDrawer,
       changeRadio,
+      handleChange,
+      beforeUpload,
     };
   },
 };