当前位置: 首页 > 后端技术 > Node.js

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

时间:2023-04-03 19:54:09 Node.js

拖放文件上传功能前端和nodejs后端实现功能说明拖放图片或文件并上传(本文只允许图片)实现前端//e表示拖放dom节点e.ondrop=function(event){event.preventDefault();让文件=event.dataTransfer.files[0];//使用FileReader对象读取文件letreader=newFileReader();让fileType=file.type;让url=reader.readAsDataURL(文件);让formData=newFormData();formData.append('文件',文件);如果(!(/^image\/[jpeg|png|gif|jpg]/.test(file.type))){返回;}//预览//读取为base64letreader=newFileReader();reader.readAsDataURL(文件);//监听读取完成reader.onload()=function(){//base64地址letsrc=reader.result;}//发送ajax,参数为formData}nodejsbackend//引入fs模块varfs=require('fs');varpath=require('path');//引入multer模块,第三方模块varmulter=require('multer');//设置上传文件夹,这里存放上传的二进制文件varuploadImg=multer({dest:"public/upload/"});router.post('/image',uploadImg.any(),(req,res,next)=>{//文件存放路径letfile_path=[];//设置相对路径letdesc_path=path.resolve('',path.join(__dirname,''),'../../../public/上传');for(leti=0;i