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

最新推荐文章于 2023-08-01 10:02:23 发布

weixin_33889245

最新推荐文章于 2023-08-01 10:02:23 发布

阅读量851

点赞数 1

文章标签：前端 javascript 后端 ViewUI

原文链接：https://my.oschina.net/yj1993/blog/1512650

版权

2019独角兽企业重金招聘Python工程师标准>>>

首先从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以及后面的各种问题。不过最终还是解决了。真的好开心，谢谢我的神助攻

转载于:https://my.oschina.net/yj1993/blog/1512650