Nodejs实现文件上传返回上传地址预览

1.上传input格式

 

<input type=file enctype="multipart/form-data" name="fieldname">

2.引入模块

//没有安装的，先安装。
//npm init -y
//npm i express multer
//express包含path和fs

const express = require("express");
const path = require("path");
const fs = require("fs");
const multer = require("multer");

3.搭建服务器

const app=express();
app.listen(3000,"localhost",()=>{
  console.log("监听3000端口成功");//监听成功执行的回调函数
})

4.实例化

let objMulter = multer({ dest: "./public/upload" });
//实例化multer，传递的参数对象，dest表示上传文件的存储路径
app.use(objMulter.any())//any表示任意类型的文件
// app.use(objMulter.image())//仅允许上传图片类型

5.静态化

app.use(express.static("./public"));//将静态资源托管，这样才能在浏览器上直接访问预览图片或则html页面

6.编写接口

app.post("/api/upload", (req, res) => {
  let oldName = req.files[0].path;//获取名字
  //给新名字加上原来的后缀
  let newName = req.files[0].path + path.parse(req.files[0].originalname).ext;
  fs.renameSync(oldName, newName);//改图片的名字
  res.send({
    err: 0,
    url:
      "http://localhost:3000/upload/" +
      req.files[0].filename +
      path.parse(req.files[0].originalname).ext//该图片的预览路径
  });
});

7.使用element上传组件上传

<el-upload
   class="upload-demo"
   drag
   action="http://localhost:3000/api/upload"
>
 <el-icon class="el-icon--upload"><upload-filled /></el-icon>
 <div class="el-upload__text">拖拉或点击上传营业执照</div>
 <template #tip>
  <div class="el-upload__tip">仅支持JPG、PNG格式2MB以下的文件</div>
   </template>
</el-upload>

8.控制台收到地址

9.文章引入链接：通过nodejs实现文件的上传