vue3+node.js实现图片上传和文件上传+保存文件到node.js后端

一，vue3前端代码逻辑 

1.vue3项目中使用Upload 上传组件

element-plus链接：一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

2.Upload 上传组件代码修改

 2.1图片上传

<el-upload class="upload-demo" method="post" :headers="uploadHeaders" drag
                            action="http://127.0.0.1:3003/model/fileUpload" :show-file-list="false"
                            :before-upload="beforeFileUpload" :on-success="handleFileUploadSuccess1">
                            <img v-if="model.modelImage" :src="model.modelImage" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <plus-icon />
                            </el-icon>
                        </el-upload>

2.2文件上传

<el-upload class="upload-demo" method="post" :headers="uploadHeaders" drag
                            action="http://127.0.0.1:3003/model/fileUpload" multiple :on-success="handleFileUploadSuccess2">
                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                            <div class="el-upload__text">
                                Drop file here or <em>click to upload</em>
                            </div>
                            <template #tip>
                                <div class="el-upload__tip">
                                    jpg/png files with a size less than 500kb
                                </div>
                            </template>
                        </el-upload>

3.文件上传返回路径和文件名函数

import { UploadFilled } from '@element-plus/icons-vue'
import { newModelApi } from '../apis/model';// 模型接口

const dialogVisible = ref(false);// 新增模型
const model = ref({
    modelName: '',// 模型名称
    modelType: '',// 模型类型
    date1: '',
    date2: '',
    modelImage: '',// 模型图片
    modelFile: '',// 模型文件
    whetherToShare: '',
    createAuthor: '',
})

// 图片格式限制
const beforeFileUpload = (file) => {
    const allowedFormats = ['image/jpeg', 'image/png']; // 允许的文件格式
    if (!allowedFormats.includes(file.type)) {
        this.$message.error('文件格式必须是 JPG 或 PNG！');
        return false;
    }
    return true; // 允许上传
};

const uploadHeaders = ref({
    Authorization: localStorage.token, // 设置授权头部，根据实际情况修改
})

// 图片上传
const handleFileUploadSuccess1 = (response, file) => {
    // 假设服务器返回的响应数据中包含文件的URL
    const fileUrl = 'http://localhost:3003/' + response.data;
    // 更新模型中的图片URL
    model.value.modelImage = fileUrl;
};

// 文件上传
const handleFileUploadSuccess2 = (response, file) => {
    // 假设服务器返回的响应数据中包含文件的URL
    const fileUrl = 'http://localhost:3003/' + response.data;
    // 更新模型中的图片URL
    model.value.modelFile = fileUrl;
};

二，后端node.js代码逻辑

1.后端文件上传接口

// 模型接口
var exports = require('express');
var router = exports.Router();
const UserControllers = require("../controllers/ModelControllers")

/**
 * 新增模型
 * http://127.0.0.1:3003/model/newModel
 */
router.post("/newModel", UserControllers.newModel)

/**
 * 文件上传
 * http://127.0.0.1:3003/model/fileUpload
 */
router.post("/fileUpload", UserControllers.fileUpload)

module.exports = router

 2.在utils文件下新建uploadFile.js文件，用于解析文件上传和保存文件，代码如下

注意还需要在pubilc文件下创建uploads文件夹，用于存放上传的图片和文件

// 文件上传
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // 指定上传文件的文件夹路径
    const uploadFolder = 'public/uploads';
    cb(null, uploadFolder);
  },
  filename: (req, file, cb) => {
    // 生成唯一的文件名，这里使用时间戳作为文件名
    const timestamp = Date.now();
    const extension = path.extname(file.originalname);
    const filename = `${timestamp}${extension}`;
    cb(null, filename);
  },
});

const upload = multer({ storage: storage }).single('file');

function uploadFile(req, res, next) {
  upload(req, res, next, async function (err) {
    if (err) {
      console.log(err);
      res.status(500).send({ success: false, message: '文件上传失败' });
    } else {
      next(); // 调用下一个中间件或路由处理函数
    }
  });
}

module.exports = uploadFile;

3.文件上传接口功能，这里是返回文件的名称和文件地址

const uploadFile = require('../utils/uploadFile');// 文件上传


// 文件上传
    async fileUpload(req, res, next) {
        try {
            // 使用uploadFile模块处理文件上传
            uploadFile(req, res, async (err) => {
                if (err) {
                    console.log(err);
                    res.send(Response.error({ msg: '文件上传失败' }));
                } else {
                    // 文件上传成功
                    const fileUrl = req.file.path.replace('public', ''); // 获取文件路径，可以根据实际情况修改
                    // 将文件的 URL 添加到模型数据中
                    const data = req.body;
                    data.fileUrl = fileUrl;
                    const fileAddress = data.fileUrl
                    res.send(Response.success({ msg: '上传成功', data: fileAddress }));
                }
            });

        } catch (error) {
            console.log(error);
            res.send(Response.error({ msg: '文件上传失败' }));

        }
    }

4.目前功能集成完成了，在前端vue3中就可以访问到保存到文件和图片；

// 图片上传
const handleFileUploadSuccess1 = (response, file) => {
    // 假设服务器返回的响应数据中包含文件的URL
    const fileUrl = 'http://localhost:3003/' + response.data;
    // 更新模型中的图片URL
    model.value.modelImage = fileUrl;
};

// 文件上传
const handleFileUploadSuccess2 = (response, file) => {
    // 假设服务器返回的响应数据中包含文件的URL
    const fileUrl = 'http://localhost:3003/' + response.data;
    // 更新模型中的图片URL
    model.value.modelFile = fileUrl;
};

数据库中只保存文件名字或者将完整路径保存下来；

注意这个路径里面不加pubilc

这样就可以直接访问到上传到后端的图片和文件了！！！