文件上传

准备工作

前端准备工作：

1、前端页面要实现文件上传，必须使用input的file组件

 <input type="file" name="" id="movimg" hidden="hidden">

2、前端对文件上传组件的优化【一般情况是将组件进行隐藏，然后通过其他的元素触发组件的点击并选则文件】

• 让input hidden
• 对img元素添加点击事件，在img的点击事件中触发input的点击

$("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