前端上传文件到服务器的问题总结（1）

关于本人在实际项目中遇到的上传文件的问题，总结如下：

1. 通过new formData 对象然后赋值给formdata通过ajax上传；
2. 通过form表单的默认post请求提交。
   然而坑穿了，遇到了许许多多的问题；
   因为上传文件之后还需要做异步处理，渲染返回的内容。
   故此先处理了form表单提交默认会唤起浏览器跳转至新的url↓

然而并没有什么卵用，因为部分使用的是oss服务，先上传至oss再将路径保存到数据库；上传文件之后还需要渲染数据
使用jquery-form.js会导致

var form = $('form'),
            options = {
                url:'/oss/uploadFile', //上传文件的路径
                type:'post',
                success:function(data){
                    console.log('上传照片 返回>>>',data);
                    data.map(function(it,id,ar){
                        v.$data.previewImgArr.push(it);
                        qjfArr.push({
                            classTimeId:getQueryString('classTimesId'),
                            fileName: it.original,
                            filePath: it.url,
                            fromPort: "2",
                            materialTypeId: 1,
                        });
                    });
                }
            };
            form.ajaxSubmit(options);

然而并没有什么卵用，在上传至oss服务后还需要保存到数据库
所以咱们还得发一次请求，

            form.ajaxSubmit({
                url:'/learningMaterials/addLearningMaterials',
                type:'post',
                data:qjfArr,
                success:function(data){

                },
                error:function(err){
                    console.log('err',err)
                }
            })

然后就出事啦， 请求头和发送数据的方式不对了， 后台直接拦截都不接收了、 等问题解决继续跟进。

解决方案

       $.ajax({
            type: 'post',
            url: "/oss/uploadFile",
            data: formData,
            cache: false,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false   // 告诉jQuery不要去设置Content-Type请求头
        })

将jquery默认更改请求头和数据序列化的操作设置关闭就好。
然后等代码

 success:function(data){ 
   //将oss存储成功返回的URL ,
  // 存到你的服务器。
}