文件上传的坑

在写文件上传接口的时候，我遇到了很多坑，以往使用jquery的ajax发送请求的content-type 都是默认的'application/json'，然而，发送文件需要使用formdata格式，所以我们需要将ajax中的contentType字段设置为false，然后还有需要注意的是，需要添加上一个字段processData设置为false，这里是为了对data参数进行序列化处理。

现在，我们来梳理一下上传文件的流程：

首先，我们需要在获取input的文件：

 var file = document.getElementById(`${fileElelmentID}`).files[0];

其次，我们需要将将input的文件放入到formdata里面，这里需要new FormData()：

var formData = new FormData();
formData.append('file',file);
formData.append('name',dname);//其他信息

如果有想一块发送的东西都统统放到formdata里面一起发送哦。

最后一步，就是要发送请求，我采用的是jquery的$.ajax()进行发送：

$.ajax({
            url:API.uploadFile,
            type:'POST',
            data:formData,
            dataType:"JSON",
            contentType:false,
            processData:false,//为了保证formData能传过去 ，不加会报错
            success:function(data,state){
                success(data,state)},
            error:function(data,state){
                failed(data,state)}
        })

最后，依照惯例，放全部的代码（其实可以跟我一样将所有的网络请求都封装一下，方便之后调用）

ajaxHandler.prototype.uploadFile = function(fileElelmentID,{dname,teacher,username,origion,filedesc,course},success,failed){
        success = typeof success ==='function'?success:new Function();
        failed = typeof failed ==='function'?failed:new Function();
        var formData = new FormData();
        var file = document.getElementById(`${fileElelmentID}`).files[0];

        formData.append('file',file);
        formData.append('name',dname);
        formData.append('teacher',teacher);
        formData.append('upusername',username);
        formData.append('origin',origion);
        formData.append('desc',filedesc);
        formData.append('course',course);

        var sendData = {
            name:dname,
            file:formData,
            teacher,
            upusername:username,
            origin:origion,
            desc:filedesc,
            course,
        };
        // console.log(document.getElementById(`${fileElelmentID}`).files[0]);
        // console.log(sendData)
        $.ajax({
            url:API.uploadFile,
            type:'POST',
            data:formData,
            dataType:"JSON",
            contentType:false,
            processData:false,
            success:function(data,state){
                success(data,state)},
            error:function(data,state){
                failed(data,state)}
        })
    }

上面代码中的参数success和failed是两个回调函数，这两个回调函数分别处理请求发送成功和请求未发送成功的两种情况，这样封装是方便其他地方调用

success = typeof success ==='function'?success:new Function();
        failed = typeof failed ==='function'?failed:new Function();

这两句是检测是否有success和failed两个参数传入以及是否为function类型，如果不是，那就new一个Function避免后面出错。