element plus上传本地图片显示404？

Question

element plus上传本地图片显示404

<template>
  <el-form :model="formData" label-width="100px">
    <el-form-item label="名称" required>
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="分类" required>
      <el-input v-model="formData.category"></el-input>
    </el-form-item>
    <el-form-item label="图片" required>
      <el-upload
        action="/api/uploadImage"
        :show-file-list="false"
        :before-upload="beforeUploadImage"
        :on-success="handleSuccessImage">
        <el-button size="small" type="primary">上传图片</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item label="文本" required>
      <el-upload
        action="/api/uploadText"
        :show-file-list="false"
        :before-upload="beforeUploadText"
        :on-success="handleSuccessText">
        <el-button size="small" type="primary">上传文本</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item label="音频" required>
      <el-upload
        action="/api/uploadAudio"
        :show-file-list="false"
        :before-upload="beforeUploadAudio"
        :on-success="handleSuccessAudio">
        <el-button size="small" type="primary">上传音频</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from '../api/axios'
export default {
  data() {
    return {
      formData: {
        name: '',
        category: '',
        image: '',
        text: '',
        audio: ''
      }
    };
  },
  methods: {
    beforeUploadImage(file) {
      console.log(this.beforeUploadFile(file, 'image'))
      return this.beforeUploadFile(file, 'image');
    },
    beforeUploadText(file) {
      return this.beforeUploadFile(file, 'text');
    },
    beforeUploadAudio(file) {
      return this.beforeUploadFile(file, 'audio');
    },
    beforeUploadFile(file, type) {
      const allowedTypes = {
        image: ['image/jpeg', 'image/png'],
        text: ['text/plain'],
        audio: ['audio/mpeg', 'audio/wav']
      };
      if (!allowedTypes[type].includes(file.type)) {
        this.$message.error(`上传${type === 'audio' ? '音频' : type}格式不正确`);
        return false;
      }
      return true;
    },
    handleSuccessImage(response) {
      this.formData.image = response.url;
    },
    handleSuccessText(response) {
      this.formData.text = response.url;
    },
    handleSuccessAudio(response) {
      this.formData.audio = response.url;
    },
    submitForm() {
      axios.post('/users', this.formData)
        .then(response => {
          console.log('提交成功', response);
          this.$message.success('提交成功');
          this.resetForm();
        })
        .catch(error => {
          console.error('提交失败', error);
          this.$message.error('提交失败');
        });
    },
    resetForm() {
      this.formData.name = '';
      this.formData.category = '';
      this.formData.image = '';
      this.formData.text = '';
      this.formData.audio = '';
    }
  }
};
</script>

const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const cors = require("cors");
const path = require("path");
const multer = require("multer");
const app = express();
app.use(cors());
const PORT = process.env.PORT || 3000;

// 连接到 MongoDB 数据库
mongoose
  .connect("mongodb://127.0.0.1:27017/user", {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("MongoDB 连接成功"))
  .catch((err) => console.error("MongoDB 连接错误", err));

// 定义用户数据模型
const UserSchema = new mongoose.Schema({
  name: String,
  category: String,
  image: String,
  text: String,
  audio: String,
});

const User = mongoose.model("User", UserSchema);

// 设置文件上传的存储引擎和路径
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    if (file.fieldname === "image") {
      cb(null, "uploads/images");
    } else if (file.fieldname === "text") {
      cb(null, "uploads/texts");
    } else if (file.fieldname === "audio") {
      cb(null, "uploads/audios");
    }
  },
  filename: function (req, file, cb) {
    const extname = path.extname(file.originalname);
    cb(null, Date.now() + extname);
  },
});

const upload = multer({ storage: storage });

// 处理文件上传的路由
app.post("/api/uploadImage", upload.single("image"), (req, res) => {
  res.json({ url: req.file.path });
});

app.post("/api/uploadText", upload.single("text"), (req, res) => {
  res.json({ url: req.file.path });
});

app.post("/api/uploadAudio", upload.single("audio"), (req, res) => {
  res.json({ url: req.file.path });
});

// 处理用户数据上传的路由
app.post("/users", (req, res) => {
  const userData = req.body;
  User.create(userData)
    .then((resr) => {
      console.log("用户创建成功", res);
    })
    .catch((err) => {
      console.error("创建用户失败", err);
    });
});

// 获取所有用户
app.get("/users", async (req, res) => {
  try {
    const users = await User.find();
    res.json(users);
  } catch (error) {
    console.error("获取用户错误:", error);
    res.status(500).json({ error: "获取用户错误" });
  }
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

我试过后端路由更改没有效果

Answer 1

、

你把这玩意儿打印出来就知道为啥了。这是个 file:// 本地绝对路径。