如何使用primeng fileupload保存上传的文件？答案

【问题标题】：How to save uploaded file using primeng fileupload?如何使用primeng fileupload保存上传的文件？
【发布时间】：2018-05-14 06:23:32
【问题描述】：

我正在尝试使用primeng 文件上传。但我不知道如何将上传的图像保存在某个给定的路径上。我得到 uploadedFiles 对象，但我无法将文件保存到给定路径。

<p-fileUpload multiple="multiple"
                                  name="DefaultFileUploadFileInput[]"
                                  [url]="uploadUrl"
                                  accept="image/*"
                                  maxFileSize="1000000"
                                  (onUpload)="onUpload($event)">

                        <ng-template pTemplate="content">
                            <ul *ngIf="uploadedFiles.length">
                                <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                            </ul>
                        </ng-template>
                    </p-fileUpload>

角度代码：

uploadUrl: string;
uploadedFiles: any[] = [];

    constructor(
        injector: Injector,
        private demoUiComponentsService: DemoUiComponentsServiceProxy
    ) {
        super(injector);
        this.uploadUrl = AppConsts.remoteServiceBaseUrl + '/DemoUiComponents/UploadFiles';
    }

    // upload completed event
    onUpload(event): void {
        for (let file of event.files) {
            this.uploadedFiles.push(file);
        }
    };

【问题讨论】：

不清楚你的问题是什么。您是否在此 url “AppConsts.remoteServiceBaseUrl + '/DemoUiComponents/UploadFiles'” 处有 PHP 或一些后端代码，它们将接受文件并将其保存在您的服务器上？

标签： angular primeng

【解决方案1】：

在名称属性中，我们定义了在服务器站点中用于识别文件的名称。使用以下代码 .. 将 name="DefaultFileUploadFileInput[]" 重命名为 name="DefaultFileUploadFileInput"

<p-fileUpload                     multiple="multiple"
                                  name="DefaultFileUploadFileInput"
                                  [url]="uploadUrl"
                                  accept="image/*"
                                  maxFileSize="1000000"
                                  (onUpload)="onUpload($event)">

                        <ng-template pTemplate="content">
                            <ul *ngIf="uploadedFiles.length">
                                <li *ngFor="let file of uploadedFiles"> 
                                 {{file.name}} - {{file.size}} bytes</li>
                            </ul>
                        </ng-template>
 </p-fileUpload>

在 API 中添加以下代码..

/*** File Upload
     * @throws JSONException ***/
        @RequestMapping(value = "/UploadFiles/", 
            method = RequestMethod.POST, 
            produces = MediaType.APPLICATION_JSON_VALUE,
            consumes="multipart/form-data")
          public @ResponseBody String uploadFileOperation(
                  @RequestParam("DefaultFileUploadFileInput") MultipartFile[] files) throws IllegalStateException, IOException, JSONException {
         String filePath="xyz/Test FileUpload/";
         File saveDir = new File(filePath);
               if(!saveDir.exists())
               {
                   saveDir.mkdirs();
               }
 for (MultipartFile file : files) {
                        File f= new File(filePath,file.getOriginalFilename());
                        String Filename=file.getOriginalFilename()
 try {
                                file.transferTo(f); //Transfer or Saving in local memory 
                            }catch (IOException e) {
                                        e.printStackTrace();
                                    }
//your logic here
}
            return "file upload done"
          }

【讨论】：