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

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

功能描述

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

   实现

   前端

   // 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 = new FileReader();
    reader.readAsDataURL(file);
    // 监听读取完成
    reader.onload() = function() {
        // base64地址
        let src = reader.result;
    }
     //发送ajax，以formData作为参数
    
   }

   nodejs后端

   //引入fs模块
   var fs = require('fs');
   var path = require('path');
   //引入multer模块，第三方模块
   var multer = require('multer');
   //设置上传的文件夹, 此处存放的是上传的二进制文件
   var uploadImg = multer({dest: "public/upload/"});
   router.post('/image', uploadImg.any(), (req, res, next) => {
    // 文件存放路径
    let file_path = [];
    // 设置相对路径
    let desc_path = path.resolve('', path.join(__dirname, ''), '../../../public/upload');
    for (let i = 0; i < req.files.length; i++) {
        let n = req.files[i].originalname.lastIndexOf('.');
        let type = req.files[i].originalname.substring(n);
        // 读取上传的二进制文件，并转化成指定类型
        if (/[png|jpg]$/.test(type)) {
            // 这里路径用.\会自动从跟目录开始
            let des_dress = `${desc_path}/image/${req.files[i].filename}${type}`;
            console.log(des_dress)
            let _data = null;
            try {
                _data = fs.readFileSync(req.files[i].path)
            } catch(e) {
                console.log('同步读取失败' + e);
            }
            if (_data) {
                try {
                    fs.writeFileSync(des_dress, _data)
                    file_path.push(`http://127.0.0.1:3000/xxx/public/upload/image/${req.files[i].filename}${type}`)
                    // 删除上传过来的二进制文件
                    fs.unlinkSync(req.files[i].path)
                } catch(e) {
                    console.log('同步写入或删除失败' + e)
                }
            }
            console.log(req.files[i])
        } else {
            res.send($common.setErrorData('请上传正确的图片类型'));
        }
    }
    $common.resData.data = {
        path: file_path
    };
    $common.resData.msg = '上传图片成功';
    res.send($common.resData);
   })

说明

1. 示例只是部分代码，有疑问可以留言或者私信，有错误也可以指正，谢谢。

注：想要获取更多前端知识可以关注博主哦 ~