feat: 增加文件上传

.gitignore

@@ -21,3 +21,4 @@ dist-ssr
 *.sln
 *.sw?
 stats.html
+/public/uploads/

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.6.8",
+    "multiparty": "^4.2.3",
     "vue": "^3.3.8",
     "vue-router": "4"
   },

src/client/router/index.js

@@ -38,6 +38,10 @@ export const routes = [
       },
     ],
   },
+  {
+    path: "/fileUpload",
+    component: () => import("@/views/fileUpload/index.vue"),
+  },
 ];
 
 export const router = createRouter({

src/client/views/fileUpload/api.js

@@ -0,0 +1,12 @@
+import request from "@/utils/request";
+
+export const fileUploadApi = (data) => {
+  return request({
+    url: "/api/upload/single",
+    method: "POST",
+    data,
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+};

src/client/views/fileUpload/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="file-upload">
+    <input ref="uploadRef" type="file" :multiple="multiple" :accept="accept" />
+    <button @click="handleUpload">上传</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { fileUploadApi } from "./api";
+
+const props = defineProps({
+  multiple: {
+    type: Boolean,
+    default: true,
+  },
+  accept: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const uploadRef = ref();
+const handleUpload = async () => {
+  const file = uploadRef.value.files[0];
+  if (!file) {
+    console.warn("请选择文件");
+    return;
+  }
+  const formData = new FormData();
+  formData.append("file", file);
+  const res = await fileUploadApi(formData);
+  console.log(res);
+};
+</script>

src/server/main.js

@@ -2,6 +2,7 @@ import express from "express";
 import ViteExpress from "vite-express";
 import wallpaper from "./wallpaper/index.js";
 import deploy from "./deploy/index.js";
+import upload from "./upload/index.js";
 
 const app = express();
 const router = express.Router();
@@ -23,6 +24,8 @@ router.use("/deploy", deploy);
 
 router.use("/wallpaper", wallpaper);
 
+router.use("/upload", upload);
+
 const server = app.listen(3001, "0.0.0.0", () => {
   console.log("Click here to open the browser: http://localhost:3001");
 });

src/server/upload/index.js

@@ -0,0 +1,47 @@
+import express from "express";
+import multiparty from "multiparty";
+
+const router = express.Router();
+/**
+ * Uploads a file using the multiparty library.
+ *
+ * @param {Object} req - The request object containing the file to be uploaded.
+ * @return {Promise<Object>} A promise that resolves to an object containing the parsed fields and files.
+ */
+const multipartyUpload = (req) => {
+  return new Promise(async (resolve, reject) => {
+    const form = new multiparty.Form({
+      maxFilesSize: 1024 * 1024 * 1024,
+    });
+    form.uploadDir = "./public/uploads";
+    form.parse(req, (err, fields, files) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve({ fields, files });
+    });
+  });
+};
+
+router.post("/single", async (req, res) => {
+  try {
+    let { files } = await multipartyUpload(req);
+    let file = (files.file && files.file[0]) || {};
+    res.send({
+      code: 0,
+      message: "上传成功",
+      data: {
+        originalFilename: file.originalFilename,
+        servicePath: file.path.replace("public", ""),
+      },
+    });
+  } catch (error) {
+    res.send({
+      code: 1,
+      message: error.message,
+    });
+  }
+});
+
+export default router;