node + multer 实现文件上传

node + multer 实现文件上传

介绍

• 使用Node.js中的express框架和multer，实现文件的上传

实现

1. 前端

<el-upload
        class="upload-demo"
        action="http://localhost:5678/uploadModel"
        :show-file-list="false"
        :on-success="getUploadSuccess"
        >
        <el-button size="small" type="primary">点击上传</el-button>
</el-upload>


getUploadSuccess(res, file) {
      // this.avatar = res.avatar;
      // console.log(564);
      this.$message({
        type: "success",
        message: "模型上传成功!",
      });
    },

• 通过element ui组件库中的el-upload上传组件和el-button按钮
• 点击上传按钮，激活el-upload组件的action调用对应的后端接口

2. 后端接口

var multer = require('multer');

// 此操作会创建uploads文件夹，也可理解为最终存储的目标文件夹,服务启动就会自动创建
var upload = multer({ dest: 'Simulation_Model/' });

// 此操作理解为，将文件暂时储存在这个文件夹中
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './Simulation_Model')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname)
    }
})
var upload = multer({ storage: storage })



// 调用接口，上传文件
app.post('/uploadModel', upload.single('file'), function (req, res, next) {
    if (req.file === undefined) {
        return res.send("模型上传失败！");
    }
    // fs.renameSync(oldpath, newpath);新路径和旧路径都要存在
    // 将文件从旧文件夹剪切到新文件夹中，由于我们只需要一个文件夹，所以新路径与旧路径相同，
    fs.renameSync('./Simulation_Model/' + req.file.filename, "./Simulation_Model/" + req.file.originalname);
    res.send("模型上传成功！");
})

• 上传成功后，文件保存在后端目录的Simulation_Model文件夹内