用原生js加node数据接口实现头像上传功能

2023-09-30 01:16:45

前言

本文主要记录一下如何用原生js和Node数据接口实现一个头像上传功能，以便前后端工程师参考。

前端代码

HTML部分

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <input type="file" id="avatar" accept="image/*">
  <button type="button" id="upload">上传</button>
  <div id="preview"></div>
</body>
</html>

CSS部分

#avatar {
  display: none;
}

#preview {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

JS代码

const avatar = document.getElementById('avatar');
const preview = document.getElementById('preview');
const upload = document.getElementById('upload');

avatar.addEventListener('change', function() {
  const file = this.files[0];
  const reader = new FileReader();

  reader.onload = function() {
    preview.style.backgroundImage = `url(${reader.result})`;
  };

  reader.readAsDataURL(file);
});

upload.addEventListener('click', function() {
  const file = avatar.files[0];
  const formData = new FormData();

  formData.append('avatar', file);

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.log(err);
  });
});

后端代码

Node.js代码

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();

const storage = multer.diskStorage({
  destination: path.join(__dirname, 'public/uploads'),
  filename: function(req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage });

app.post('/upload', upload.single('avatar'), (req, res) => {
  res.json({
    success: true,
    data: req.file
  });
});

app.listen(3000);