技术标签: node.js 前端 javascript
前端准备工作:
1、前端页面要实现文件上传,必须使用input的file组件
<input type="file" name="" id="movimg" hidden="hidden">
2、前端对文件上传组件的优化【一般情况是将组件进行隐藏,然后通过其他的元素触发组件的点击并选则文件】
$("img").on("click",function(){
$("#movimg").click();
})
后端准备工作:
1、文件上传依赖的multer组件,所有首先在项目中安装multer
npm i multer
2、引入第三方的工具方法实现文件的操作[引入了handleFileUtils]
module.exports.fileUpload = function(req,resp){
let upload = uploadFiles();
upload(req,resp,function(error){
//文件上传成功后会回调的一个方法
console.log(error);
});
}
-------
//文件上传的接口--- 文件上传接口必须是post请求
router.post("/fileupload",fileController.fileUpload);
//实现文件的上传操作
function fileUpload(){
//console.log("文件被改变了");
//获取文件的浏览器中虚拟地址
let path = URL.createObjectURL(this.files[0]); //this是file组件 files属性表示当前组件中的所有文件【数组】
$("img").attr("src",path);//实现了预览的效果--- 并没有真正上传
//文件上传数据只能以formdata的形式传递
let fd = new FormData(); //创建formdata对象 其中没有数据
// for(let i = 0;i<this.files.length;i++){ //如果是多文件则必须将所有的文件追加到formdata对象中
// fd.append(this.files[i])
// }
fd.append("file",this.files[0]);
//将文件上传到服务端
$.ajax({
url:"http://localhost:8080/file/fileupload",
type:"post", //必须是post请求
data:fd,//数据必须是放在Formdata 对象上
contentType:false,
processData:false,
dataType:"json",
success:function(resp){
// console.log(resp);
if(resp.code==200){
//偷偷的将图片的地址给换成在服务端的地址或者保持不变 http://localhost:8080/temp/文件名
$("img").attr("filename",resp.datas.filename);
}else{
alert("图片不合法,请选择其他图片");
//改回默认的图片
}
}
})
}
确认上传:
直接发起请求,到后端
//确认上传 1.将用户最终确认的图片从temp目录中拷贝到img中 2.删除temp中的图片
module.exports.fileSureUpload = function(req,resp){
let fromPath = "./public/temp";
let toPath = "./public/img";
let filename = "1669779727404-test02.png"; //模拟直接获取到文件名--- 后面 通过ajax携带
moveFiles({
fromPath,toPath,filename}); //移动图片 将真正确认的图片放在img中
deleteFiles("./public/temp"); //删除临时目录
}
contentType
作用:设置前端传递给后端的数据类型的
常见值:
1、“application/x-www-form-urlencoded; charset=UTF-8” 【jQuery ajax中默认的类型】---- 对应直接传递对象,或者通过地址栏的形式传递参数
2、application/json;charset=UTF-8 传递JSON 前端需要传递JSON到后端必须设置为application/json
3、 multipart/form-data 传递文件
processData
默认为true . 为true时jQuery会将数据进行转换。如:是get请求的时候会将数据带在URL地址后面。
上传文件不希望被转换,需要改为false
文章浏览阅读6.9k次。WCE 下载地址:链接:https://share.weiyun.com/5MqXW47 密码:bdpqku工具界面_wce.exe -s aaa:win-9r7tfgsiqkf:00000000000000000000000000000000:a658974b892e
文章浏览阅读4.5k次。Weather Globe(Mackiev)Google Earth(Google)Virtual Earth(Microsoft)World Wind(NASA)Skyline Globe(Skylinesoft)ArcGISExplorer(ESRI)国内LTEarth(灵图)、GeoGlobe(吉奥)、EV-Globe(国遥新天地) 软件名称: 3D Weather Globe(http:/_网络地球仪
文章浏览阅读1.9w次,点赞113次,收藏57次。我要买这些东西,然后震惊整个办公室_程序员展示刀,产品经理展示枪
文章浏览阅读1.6w次,点赞7次,收藏63次。霍尔信号、编码器信号与电机转向从电机出轴方向看去,电机轴逆时针转动,霍尔信号的序列为编码器信号的序列为将霍尔信号按照H3 H2 H1的顺序组成三位二进制数,则霍尔信号翻译成状态为以120°放置霍尔为例如不给电机加电,使用示波器测量三个霍尔信号和电机三相反电动势,按照上面所说的方向用手转动电机得到下图① H1的上升沿对应电机q轴与H1位置电角度夹角为0°,..._霍尔信号
文章浏览阅读7.1k次,点赞5次,收藏36次。个人微信淘宝客返利机器人搭建一篇教程全搞定天猫淘宝有优惠券和返利,仅天猫淘宝每年返利几十亿,你知道么?技巧分享:在天猫淘宝京东拼多多上挑选好产品后,按住标题文字后“复制链接”,把复制的淘口令或链接发给机器人,复制机器人返回优惠券口令或链接,再打开天猫或淘宝就能领取优惠券啦下面教你如何搭建一个类似阿可查券返利机器人搭建查券返利机器人前提条件1、注册微信公众号(订阅号、服务号皆可)2、开通阿里妈妈、京东联盟、拼多多联盟一、注册微信公众号https://mp.weixin.qq.com/cgi-b_怎么自己制作返利机器人
文章浏览阅读2.1k次,点赞2次,收藏5次。技术分享时应秉持的基本原则:应有团队和个人、奉献者(统筹人)的概念,同时匹配团队激励、个人激励和最佳奉献者激励;团队应该打开工作内容边界,成员应该来自各内容方向;评分标准不应该过于模糊,否则没有意义,应由客观的基础分值以及分团队的主观综合结论得出。应有心愿单激励机制,促进大家共同聚焦到感兴趣的事情上;选题应有规范和框架,具体到某个小类,这样收获才有目标性,发布分享主题时大家才能快速判断是否是自己感兴趣的;流程和分享的模版应该有固定范式,避免随意的格式导致随意的内容,评分也应该部分参考于此;参会原则,应有_技术分享
文章浏览阅读1k次。在模板中,我们使用了标签,将由o2-view组件负责渲染,给o2-view传入了两个参数:app="内容管理数据"和name="所有信息",我们将在o2-view组件中使用这两个参数,用于展现“内容管理数据”这个数据应用下的“所有信息”视图。在o2-view组件中,我们主要做的事是,在vue组件挂载后,将o2的视图组件,再挂载到o2-view组件的根Dom对象。当然,这里我们要在我们的O2服务器上创建好数据应用和视图,对应本例中,就是“内容管理数据”应用下的“所有信息”视图。..._vue2 oa
文章浏览阅读222次。table是lua中非常重要的一种类型,有必要对其多了解一些。
文章浏览阅读549次,点赞30次,收藏9次。我们前面学习都有一个概念,被private封装的资源只能类内部访问,外部是不行的,但这个规定被反射赤裸裸的打破了。反射就像一面镜子,它可以清楚看到类的完整结构信息,可以在运行时动态获取类的信息,创建对象以及调用对象的属性和方法。
文章浏览阅读1.1k次,点赞35次,收藏12次。Logical Volume Manager,逻辑卷管理能够在保持现有数据不变的情况下动态调整磁盘容量,从而提高磁盘管理的灵活性/boot分区用于存放引导文件,不能基于LVM创建PV(物理卷):基于硬盘或分区设备创建而来,生成N多个PE,PE默认大小4M物理卷是LVM机制的基本存储设备,通常对应为一个普通分区或整个硬盘。创建物理卷时,会在分区或硬盘的头部创建一个保留区块,用于记录 LVM 的属性,并把存储空间分割成默认大小为 4MB 的基本单元(PE),从而构成物理卷。
文章浏览阅读379次,点赞7次,收藏10次。4、Dielecteic voltage-withstand test 介电耐压试验。1、Maximum output voltage test 输出电压试验。6、Resistance to crushing test 抗压碎试验。8、Push-back relief test 阻力缓解试验。7、Strain relief test 应变消除试验。2、Power input test 功率输入试验。3、Temperature test 高低温试验。5、Abnormal test 故障试验。
文章浏览阅读535次。镜像烧写说明_正点原子 imx6ull nand 烧录