解决"利用Html5的FileRead接口和Formdata上传文件到appweb服务器"报500（internal server error）错误

摘要: 学习就是一个“发现问题，找到问题，解决问题”的过程

首先从FileRead和Formdata说起，这是我摘出来的部分代码：

作用是：点击上传的同时去检测上传文件是否符合要求，一旦符合要求就发往后台。

function uploadAndSubmit() {
if(typeof window.FileReader == 'undefined'){
alert("Sorry, your browser does not support the FileReader interface！");
return false;
}else{
var form = document.forms["ugradeFileForm"];
if (form["file"].files.length > 0) {
var file = form["file"].files[0];
console.log(file)
var resultObj = checkUpgradeFiles(file.name);  //file.name
if(!resultObj.error){
var ugradeFileProObj = $('#ugradeFilePro');
var reader = new FileReader();
reader.onloadstart = function() {
//console.log('开始上传！！！');
ugradeFileProObj.parents('tr').show();
document.getElementById("bytesTotal").textContent = file.size;
};

reader.onprogress = function(p) {
// console.log('正在上传！！！')
var percentage =  file.size <= 0 ? "0%" : (Math.round(p.loaded / file.size * 10000) / 100.00 + "%");
ugradeFileProObj.html(percentage);
ugradeFileProObj.css('width',percentage);
if(ugradeFileProObj.html() == '100%'){
setTimeout(function () {
$('#upBtn').parents('tr').show();
},1000);
}
};
reader.onload = function() {
console.log("load complete");
};
reader.onloadend = function() {
console.log('不管是否上传成功或失败，都去调用这个！');
if (reader.error) {
console.log(this.error);
} else {
var oData = new FormData(document.forms.namedItem("ugradeFileForm"));
// oData.append('userfile',file);
console.log(oData)
$.ajax({
url: GlobalSpace.json_debug?GlobalSpace.debugUrl:"/goform/upgrade",
type: "POST",
cache: false,
processData: false,
contentType: false,
enctype: 'multipart/form-data',
data: oData,
beforeSend: function(xhr){
// $("#fileUpLoad").attr("disabled",true);
},
complete: function(xhr,status){
//  $("#fileUpLoad").attr("disabled", false);
},
error: function(xhr,status,error){
alert("Request error!");
},
success: function(result){
console.log("表单提交成功!");
}
});
}
};
reader.readAsBinaryString(file);
}else {
alert(resultObj.errorMsg);
}

} else {
alert ("Please choose a file.");
}
}
}

通过appweb.conf配置函数中的UploadDir去写入

UploadDir /var/tmp

刚开始是报一个500(internal server error)的错误，

第一步：开始检查我前端的代码是否有问题，通过打印new Formdata()对象之后发现上传文件确实已经拿到了；

第二步：开始检查后端接口的控制器函数是否有问题，通过加打印发现根本没有在服务器上找到上传的文件；

第三步：开始检查配置文件appweb.conf是否有问题，因为我是纯前端，没有遇到过这种问题，通过我男朋友的神助攻，我开始修改配置文件来尝试，首先测试UploadDir的路径是否有问题，因为进入设备之后没有看到var文件夹下面有tmp文件夹，我就把路径修改成 UploadDir /tmp 重新编译之后，500错误没有了，可以正常执行我的接口控制器函数，但是还是有错误，弹出的是416，这个状态码是我自己设置的一个，虽然问题当前还没有解决，不过已经有了质的跨越，至少现在我可以确定是配置的问题了，而且就在这个地方有问题，通过查看appweb的文档加了error.log,将他的level设置成5，方便看到所有的错误日志。

ErrorLog "error.log" size=10MB level=5 backup=5 anew

但是其实也没有找到有用的信息；我又加了trace

Trace errors=5 rxFirst=5 rxHeaders=5 txFirst=5 txHeaders=5 connection=5 info=5 rxBody=5 txBody=5 complete=5 content=10K

为了有详细的追踪，所有的我都设置为5；

又加了TraceLog

TraceLog request.log size=1MB backup=5 anew

此时，更新代码重新编译之后，终于可以正常进去我的控制器函数并且正常执行了，而且打印出来服务器上确实有文件，但是进入设备之后又没有了；串口打印出来错误“write failed error code -145”;通过我男朋友的神助攻，终于找到错误了，“现在报错是因为 不在一个分区 不能建立硬链接“，只能把UploadDir的路径改回去，让负责设备上添加文件的同事修改了一下，重新编译之后就大功告成了。

最终，我的前端代码、后端接口处理器代码的逻辑都没有任何问题，只是设备上不存在appweb.conf配置文件里UploadDir /var/tmp 这个文件夹，导致500以及后面的各种问题。不过最终还是解决了。真的好开心，谢谢我的神助攻