SyntaxError:Object.parse(native)上的意外标记D.

时间:2015-06-09 19:52:28

标签: javascript angularjs

我使用Spring Boot和Angular JS上传文件。我的Java控制器返回文件的一些细节,例如日期,类型,表单的输入,它们是上传者的名称和文件。

因此,当我点击import Report时,我可以上传文件,但我没有将详细信息添加到表格中。我有一个空行。

那么我做错了什么?

这是我的表格:

 <section id="contact-info">

    <section id="contact-page">
        <div class="container">
            <div class="center">
                <p class="lead">Import reports</p>
            </div> 
            <div class="row contact-wrap"> 
                <div class="status alert alert-success" style="display: none"></div>
                <form id="main-contact-form" class="contact-form" name="contact-form" method="POST" enctype="multipart/form-data" >
                    <div class="col-sm-5 col-sm-offset-1">
                        <div class="form-group">
                            <label>name *</label>
                            <input type="text" name="NameOfUploader" class="form-control" required="required" ng-model="r.NameOfUploader">
                        </div>

                        <div class="form-group">
                            <label>file</label>
                            <input type="file" name="file" class="form-control" fileread="r.file">
                        </div>   

我的控制器java

public class DRController {
    @Autowired
    private DetailsReportRepository detailsReportRepository;
    @RequestMapping(value="/upload",headers=("content-type=multipart/*"),consumes = {"multipart/form-data"}, method=RequestMethod.POST)
    public @ResponseBody String  handleFileUpload(@RequestParam("NameOfUploader") String NameOfUploader,@RequestParam("file") MultipartFile file){
        if (!file.isEmpty()) {
            try {

                DetailsReport d2=new DetailsReport();
                d2.setNameOfUploader(NameOfUploader);
                d2.setTypeOfFile(file.getContentType());
                d2.setDateOfUpload(new Date(new java.util.Date().getTime()));
                d2.setFile(convert(file));
                detailsReportRepository.save(d2);
                byte[] bytes = file.getBytes();
                BufferedOutputStream stream =
                        new BufferedOutputStream(new FileOutputStream(new  File("F:/FilesStore/" + d2.getId_file()+"-"+d2.getNameOfUploader())));
                stream.write(bytes);
                stream.close();
                return d2.toString();
           } catch (Exception e) {
               System.err.print("erreur");
           }
        }

        return null;
    }

    public File convert(MultipartFile file)
    {    
        File convFile = new File(file.getOriginalFilename());
        try {
            convFile.createNewFile();
            FileOutputStream fos = new FileOutputStream(convFile); 
            fos.write(file.getBytes());
            fos.close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return convFile; 
    }
}

我的控制器js

//Upload files
$scope.upload = function() {
    var fd = new FormData();
    var url='http://localhost:8080/upload';
    fd.append("file", $scope.r.file);
    fd.append("NameOfUploader",$scope.r.NameOfUploader);
    $http.post(url,fd,{
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(data){
        var b=JSON.parse(data);
        $scope.reports.push(b); 

        console.log(Json.parse(data));

        console.log($scope.reports);
    })
    .error(function(){
    });
}



<div class="form-group">
    <a  class="btn btn-primary btn-lg"  ng-click="upload()">Import File</a>
</div>
<table class="table">
    <tr>
        <th>Id_file</th>
        <th>NameOfUploader</th>
        <th>DateOfUpload</th>
        <th>TypeOfFile</th>
        <th>File</th>
    </tr>
    <tr ng-repeat="r in reports">
        <td></td>
        <td>{{r.NameOfUploader}}</td>
        <td>{{r.DateOfUpload}}</td>
        <td>{{r.TypeOfFile}}</td>
        <td>{{r.file}}</td>
    </tr>
</table>   
</div> 

这就是我所拥有的:

enter image description here

1 个答案:

答案 0 :(得分:1)

您只需更改属性的大写

即可
<tr ng-repeat="r in reports">
                        <td></td>
                        <td>{{r.nameOfUploader}}</td>
                        <td>{{r.dateOfUpload}}</td>
                        <td>{{r.typeOfFile}}</td>
                        <td>{{r.file}}</td>
                    </tr>