node上传图片-vue前端+express后台

上传图片是很常见的功能
但是这个功能有点挑战
要处理好：1.前端图片上传，2.后台接收图片，3.后台保存图片，4.将保存地址返回给前端，前端回显图片。
有不懂的同学可以咨询我微信号yizheng369
vue+node源码：https://gitee.com/618859/vue-node-simple-uploadimg
另外一份html+node参考源码：https://gitee.com/618859/picture-upload-node

效果

将电脑选择的文件图片预览：URL.createObjectURL(file.raw)

vue前端代码

注意：前端此处用了element-ui框架

sureFun() {
      // 准备上传文件数据
      var formData = new FormData();
      formData.append("file", this.activeTopImg);
      formData.append("name", '图片名称');

      let config = {
          headers: {
              'Content-Type': 'multipart/form-data'
          }
      }
      this.$axios
        .post("/api/fileUpload", formData, config)
        .then((res) => {
          console.log("提交:", res);
          this.$message({
            message: "提交成功",
            type: "warning",
          });
          // 重新获取数据
          // this.getData();
        })
        .catch((err) => {
          console.log("出错", err);
          this.$message({
            message: "服务器出错!",
            type: "error",
          });
        });
    },

node的express后台

// -------------- 图片文件上传处理 start --------------------
var Path = require('path')
// 读取静态资源
app.use(express.static('./'))
// 引入multer中间件，用于处理上传的文件数据
const multer = require('multer')
// 通过配置multer的dest属性， 将文件储存在项目下的tmp文件中
app.use(multer({ dest: './tmp/' }).any())
// 原文链接：https://blog.csdn.net/huang100qi/article/details/104083949

// 文件上传接口
app.post('/fileUpload', async function (req, res) {
  // 上传的文件在req.files中
  console.log('接收到图片上传数据:', req.body, req.files);

  // 可能有多张图片
  let arr = req.files;
  let allUrl = []
  for (let i = 0; i < arr.length; i++) {
    const filename = arr[i].destination + arr[i].originalname;
    console.log('默认名1：', arr[i].path);
    console.log('改名：', filename);
    // 修改图片文件名
    fs.renameSync(arr[i].path, filename)
    console.log('改名成功：', i);
    let str = Path.join(serverUrl,filename);
    // window的路径分割符 Path.sep 为反双斜杠 \\  此处要改为 单斜杠 /
    let url = str.split(Path.sep).join('/')
    url = 'http://'+url
    allUrl.push({
      id: arr[i].fieldname,
      url,
    })
  }
  res.send(
    {
      msg: 'upload successfully',
      allUrl
    })
});
// -------------- 图片文件上传处理 end --------------------

祝你好运！
不懂你会问我吗？