文件上传和下载

元素 drop 文件发送

 $(function(){
        $(document).on("dragover",function(e){
            //阻止document的默认dragover事件
            e.preventDefault();         
        })
         //给上传文件的区域添加drop事件
        $("#box").on("drop",e=>{       
            //阻止上传区域的默认事件
            e.preventDefault();         
            //将文件转存数组存入变量
            let wen=Array.from(e.originalEvent.dataTransfer.files)  
            //创建formData实例对象
            var form=new FormData();  
            wen.forEach((elm,i)=>{
                // 将文件遍历添加到form内
                form.append(elm.name.split(".").shift(),elm)   
            })
            $.ajax({
            type: "post",
            //后端接受的地址
            url: "http://localhost:3000/updata",      
            data: form,
            processData:false,
            contentType:false,
            success: function (response) {
                
            }
        });
        })

       
    })

安装multer
设置保存地址等后端操作

var express = require('express');
var router = express.Router();
var multer=require("multer");
var path=require("path");
//设置文件接收后存放的地址
let url=path.join(__dirname,"..","public","updata");  

var storage = multer.diskStorage({
   destination: function (req, file, cb) {
     cb(null, url)
   },
   filename: function (req, file, cb) {
   //设置文件保存时的名称
     cb(null, file.fieldname + '-' + Date.now()+'.'+file.originalname.split(".").pop())
   }
 })
  
 var upload = multer({ storage: storage })
//接收任意类型的文件
router.post('/updata', upload.any(),  (req, res, next) => {

})

module.exports=router;

设置路由

文件下载

<a href="需要下载到的文件地址" download="download">下载文件</a>

文件拖拽上传和下载

文件上传和下载

文件下载