vue3 使用element-plus el-upload组件 文件上传

准备工作
1.引入element-plus 相关依赖 具体方法可以参考:juejin.cn/post/724395… 或官网 (这里我是用的是按需导入)
2.使用代理服务器解决原生form表单文件上传的跨域问题

vite.config.ts 里配置代理服务器

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
//element-plus 按需导入相关依赖
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  base: "./",
  server: {
    host: "localhost",
    open: true,
    port: 8080,
    proxy: {
      "/myPort": {
        target: "http://127.0.0.1:3000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/myPort/, ""),
      },
    },
  },
});

前端代码

<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'



</script>

<template>
  <main>
    <el-upload class="upload-demo" drag action="myPort/upload" multiple>
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        将文件拖到此处或<em>单击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          小于500kb的jpg/png文件
        </div>
      </template>
    </el-upload>
  </main>
</template>



<style lang="scss" scoped>
main {
  width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 100px auto
}

.upload-demo {
  width: 750px;
}
</style>

后端代码

// 引入express 框架
const express = require("express");
// 引入文件处理中间件
const multer = require("multer");
// 引入路径模块
const path = require("path");
// 设置cors头解决跨域
const cors = require("cors");

const app = express();

app.use(cors()); //使用cors中间件

// 创建multer的配置内容
const storage = multer.diskStorage({
  // 设置前端传来的文件存放地址（file是定义的一个文件夹进行存放前端传来的数据的）
  destination: function (req, file, cb) {
    cb(null, "./file");
  },
  // 设置保存的文件名称，这里是使用的file的fieldname加上时间戳再加上前端传过来的文件后缀名及进行重新命名
  filename: function (req, file, cb) {
    // 文件后缀  file.originalname 为原文件名
    let extname = path.extname(file.originalname);

    let filename = Date.now() + Math.ceil(Math.random() * 999) + extname;
    console.log(Math.random);
    cb(null, filename);
  },
});

const upload = multer({ storage });

app.post("/upload", upload.array("file"), (req, res) => {
  res.json({ code: 1 });
});

// 启动服务器
app.listen(3000, () => {
  console.log("服务器已启动");
});

后端部分文件目录和使用方法和单文件上传一样:juejin.cn/post/726812…
有问题欢迎提问