上传代码

CampusExpressDelivery/src/view/system/Carousel/Carousel.vue

@@ -0,0 +1,160 @@
+<template>
+  <a-card>
+    <a-card :loading="loading">
+      <div style="display: flex;justify-content: right;margin-bottom: 1%">
+        <a-button type="primary" @click="showModal">增加</a-button>
+      </div>
+      <div style="display: flex;flex-wrap: wrap;">
+        <div v-for="item in carouselData" style="margin: 1.8%">
+          <a-card>
+            <template #cover>
+              <a-image :src="item?.content" style="width: 200px;height: 100px"/>
+            </template>
+            <template #actions>
+              <a-button type="primary" danger @click="deleteCarousel(item.id)">删除</a-button>
+            </template>
+          </a-card>
+        </div>
+      </div>
+    </a-card>
+    <div>
+      <a-modal v-model:open="modalOpen" :afterClose="onClose" keyboard title="新增轮播图" @ok="submit">
+        <a-upload
+            style="margin: 5%"
+            :max-count="1"
+            name="avatar"
+            :show-upload-list="false"
+            :customRequest="handleChange"
+            list-type="picture-card"
+            class="avatar-uploader"
+        >
+          <img v-if="imageUrl" :src="imageUrl" alt="example" style="width: 100%"/>
+          <div v-else>
+            <div class="ant-upload-text">+</div>
+          </div>
+        </a-upload>
+      </a-modal>
+    </div>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+import myAxios from "../../../api/myAxios.ts";
+import {onMounted, ref} from "vue";
+import {message} from "ant-design-vue";
+
+//加载按钮
+const loading = ref(false)
+//轮播图信息
+const carouselData: any = ref({})
+//弹出框开关
+const modalOpen = ref<boolean>(false);
+//图片地址
+const imageUrl = ref('')
+
+onMounted(() => {
+  getCarousel()
+})
+
+/**
+ * 获取轮播图列表
+ */
+const getCarousel = async () => {
+  loading.value = true;
+  const res: any = await myAxios.post('/system/list', {
+    type: 1
+  })
+  console.log(res)
+  if (res.code === 0 && res.data) {
+    loading.value = false;
+    carouselData.value = res.data
+  } else {
+    message.error(`获取数据失败：${res.message}`);
+  }
+}
+
+/**
+ * 删除轮播图
+ */
+const deleteCarousel = async (id: number) => {
+  const res: any = await myAxios.post('/system/delete', {
+    id: id
+  })
+  if (res.code !== 0) {
+    message.error(`删除失败：${res.message}`);
+  }
+  await getCarousel()
+}
+
+/**
+ * 打开弹出框
+ */
+const showModal = () => {
+  if (carouselData.value.length > 7) {
+    message.error(`添加失败,轮播图不能大于8张`);
+    return
+  }
+  modalOpen.value = true;
+};
+
+/**
+ * 关闭弹出框
+ */
+const onClose = () => {
+  imageUrl.value = ""
+  modalOpen.value = false;
+};
+
+/**
+ * 上传图片
+ */
+const handleChange = async (row: any) => {
+  let formData = new FormData()
+  formData.append("file", row.file)
+  const result = await myAxios({
+    url: '/file/upload/server',
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    data: {
+      //biz: "user_avatar",
+      biz: "system",
+      // 需根据名字取出，否则为空
+      file: formData.get("file")
+    }
+  })
+  // 传出图片地址
+  if (result.data) {
+    imageUrl.value = result.data
+  } else {
+    message.error(`图片上传失败`);
+  }
+}
+
+
+/**
+ * 确认添加
+ */
+const submit = async () => {
+  if (imageUrl.value === '' || undefined) {
+    message.error(`请上传图片`);
+    return
+  }
+  const res: any = await myAxios.post('/system/add', {
+    type: 1,
+    content: imageUrl.value
+  })
+  if (res.code !== 0) {
+    message.error(`更新失败：${res.message}`);
+  }
+  await getCarousel()
+  modalOpen.value = false;
+  imageUrl.value = '';
+}
+
+</script>
+
+<style scoped>
+
+</style>