vue.js - 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:// 本地绝对路径。