web前端笔记：文件拖拽上传

html主要代码

$(‘div’).on({
dragenter: ()=>{},
dragover: ()=>{},
drop: ()=>{}
})
// 设置被拖拽移动的内容可以放置在该标签上
event.originalEvent.dataTransfer.dropEffect = ‘move’
//获取到拖拽过来的资源
files = event.originalEvent.dataTransfer.files
//设置图片路径
img.src = URL.createObjectURL(files[0])

//上传按钮点击事件
$('input[type=button]').click(()=>{
        if(files.length > 0){
            // 创建一个文件数据流对象
            var reader = new FileReader()
            reader.onload = (event)=>{
                // 得到一个图片的 base64 编码的数据流
                var imgData = event.target.result
                // 去掉imgData开头：image/webp;base64,
                var index = imgData.indexOf(',') + 1
                imgData = imgData.substr(index)

                console.log(imgData)
                // 将imgData上传到服务器中
                $.post({
                    url: '/uploadFile',
                    data: {file: imgData},
                    success: (data)=>{
                        alert(data.message)
                    }
                })
            }
            // 开始读取文件数据流
            reader.readAsDataURL(files[0])
        }else{
            alert('请拖拽内容上传')
        }
    })

服务端app.js

安装导入模块 fs

const express = require('express')
const app = express()
const port = 3001

app.use(express.static('wwwroot'))
var fs = require('fs')
app.use(express.json()) // for parsing application/json
app.use(express.json()) // for parsing application/json
// 传大图
app.use(express.urlencoded({
    limit:'50mb',extended:true })) 
app.post('/uploadFile',(req,res)=>{
   
    //创建一个缓存区
    var buffer = new Buffer(req.body.file,'base64')

    var name = new Date().getDay()

    var random = Math.random()

    // 保存图片的方法
    fs.writeFile(