拖拽上传文件功能前端和nodejs后端实现

原创

已于 2022-02-18 09:54:47 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #javascript #node.js

于 2021-12-02 17:48:55 首次发布

本文详细介绍了如何在前端通过拖拽功能上传图片，包括使用FileReader处理文件类型和预览，以及后端Node.js中使用multer模块进行文件上传、路径转换和保存。适合前端开发者学习前端文件上传技术与后端文件管理。

拖拽上传文件功能前端和nodejs后端实现

功能描述

拖拽图片或文件并上传（本文限制只允许图片）

实现

前端

// e表示拖拽的dom节点
e.ondrop = function(event) {
   
   
    event.preventDefault();
    let file = event.dataTransfer.files[0];
    // 用FileReader对象读取文件
    let reader = new FileReader();
    let fileType = file.type;
    let url = reader.readAsDataURL(file);
    let formData = new FormData();
    formData.append('file', file);
    if (!(/^image\/[jpeg|png|gif|jpg]/.test(file.type))) {
   
   
        return;
    }
    // 预览
    // 读取成base64
	let reader