Question

我有一个带有两个输入的表单：一个是文本，另一个是文件。我如何将文件传递给后端弹簧启动？以及如何使用postgresql数据库存储或获取内容数据。谢谢你提前回来。

Answer 1

HTML文件

<input #csvFile accept=".csv" #file (change)="onCSVFileSelect(file.files)" type="file">

TypeScript文件组件类

@ViewChild('csvFile') csvFile: any;

//On File Select
onCSVFileSelect(files) {
    let file: File = files[0];

    if (file.type == "text/csv") {

        this.selectedFileName = file.name;
        this.customerService.uploadCustomerFile(file).subscribe((fileUploadResponse) => {
           //Success Block
        }, (error) => {
           //Error Block
        });
    } else {
        //alert("Plase select .csv file");
        this.reset();
    }
}

TypeScript文件服务类

uploadCustomerFile(access_token: string, file: File): Observable<any> {

        let headers = new Headers();

        let options = new RequestOptions({ headers: headers }); 

        let formData = new FormData();
        formData.append('customerData', file);       

        return this.http.post(this.baseUrl + "getCustomerCSVFile", formData, options)
                .map((res: Response) => res.json() || {});
}

Spring Controller

@RequestMapping(value = "/getCustomerCSVFile", method = RequestMethod.POST)
public ResponseGenerator getCustomerCSVFile(@RequestParam MultipartFile customerData) {
        ResponseGenerator responseGenerator = new ResponseGenerator();
        try {

            if (customerData != null) {
                System.out.println(customerData.getOriginalFilename());
            }
            return responseGenerator;
        } catch (Exception e) {
            logger.error("Error while updating user : ", e);
            return responseGenerator;
        }
}

Answer 2

您可以使用ng-file-upload依赖项。将其添加到angularJs项目后，将其添加到您的html文件中。

<div class="button btlg" ngf-select ng-model="file" name="file" ngf-min-height="100" ngf-accept="'.jar,.properties,.txt,.conf,.json'" ngf-resize="{width: 100, height: 100}">Select file</div>
<button class="bt bt-blue" type="submit" ngf-max-size="209715200" ng-click="submit()">submit</button>

根据您的要求调整ngf-accept和ngf-max-size。在你的Js文件中添加这个

$scope.submit = function() {
    $scope.uploadFile = Upload.upload({
    url : '/save/file',
    method : 'POST',
    data : {
        file: $scope.file,
        fileName : $scope.fileName
    },
    headers : {
        'Content-Type' : undefined
    }
    });

    // Control the result
    $scope.uploadFile.then(function (resp) {
        console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
    }, function (resp) {
        console.log('Error status: ' + resp.status);
    }, function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
    }); 
}

你的春季启动应用。在您的控制器中。

@Autowired
@Qualifier("saveService")
SaveService saveService;


@RequestMapping(value = "/save/file", consumes = "multipart/form-data", method = RequestMethod.POST)
@ResponseBody
public SaveFile saveFile(@RequestParam String fileName, @RequestParam MultipartFile file){
    saveService.saveFile(fileName, file);
}

在您的服务中

@Autowired
SaveFileRepository saveFileRepository;

@Transactional(isolation = Isolation.SERIALIZABLE)
public SaveFile saveFile(String fileName, MultipartFile file) {

    SaveFile saveFile = new SaveFile();
    saveFile.setName(fileName);
    saveFile.setId(UUID.randomUUID().toString());
    try {
        saveFile.setContent(file.getBytes());
    } catch (IOException e) {
        log.error("Error while saving content of {}", fileName);
    }
    saveFile = saveFileRepository.save(saveFile);
    return saveFile;
}

域类将是

@Entity
@EntityListeners(AuditingEntityListener.class)
public class SaveFile {
    @Id
    private String id;

    @Column
    private String name;

    @Lob
    @Column
    private byte[] content;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public byte[] getContent() {
        return content;
    }

    public void setContent(byte[] content) {
        this.content = content;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }
}

存储库只是一个扩展CrudRepository

的简单存储库

public interface SaveFileRepository extends CrudRepository<SaveFile,String>{
    //Add other methods here
}

Angular 2模板表单，输入类型=文件和弹簧启动

2 个答案: