使用反应形式将多个文件（图像、文件文本等）上传到服务器答案

【问题标题】：upload multiple file(image, file text,etc) to server using reactive form使用反应形式将多个文件（图像、文件文本等）上传到服务器
【发布时间】：2017-06-15 06:20:03
【问题描述】：

您好，我想上传多个文件并将它们发送到服务器：使用反应形式：我在适当的类中定义它：

this.attachmentsForm = this.formBuilder.group({
        attachmentName: ['']
      });

在模板 html 中：

 <form [formGroup]="attachmentsForm">
              <ion-item>
                <ion-label floating>
                  Attachment Name
                </ion-label>
                <ion-input type="text" formControlName="attachmentName"></ion-input>
              </ion-item>
              <input class="form-control" #fileInput type='file' (change)="fileChanged($event)">
    </form>

在这个课程中我使用了这个功能：

 fileChanged(event) {
        if (event.target.files && event.target.files[0]) {
          if (event.target.files[0].size > 512000) {
            this.fileValid = false;
            let toast = this.toastCtrl.create({
              message: 'the file size more than 500kb',
              duration: 3000
            });
            toast.present();
          } else {
            this.fileValid = true;
          }
        }

      }

那么我怎样才能获得附件的数据：（Base64 或者如果有其他解决方案）提前致谢

【问题讨论】：

标签： javascript angular ionic2 ionic3

【解决方案1】：

请试试这个代码

imageBase64:string;
file: File;

fileChanged($event: any) {
        if (event.target.files && event.target.files[0]) {
            this.file = event.target.files[0];
            if (this.file.size > 512000) {
                if (this.file.type.startsWith("image")){
                    var myReader:FileReader = new FileReader();
                    myReader.onloadend = (e) => {
                        this.imageBase64 = myReader.result;
                    }
                    myReader.readAsDataURL(this.file);
                }else {
                    Logger.error("must select an image.");
                }
            } else {
                this.fileValid = true;
            }
        }

    }

【讨论】：

是的，我做到了，但它只适用于一个图像或文件，而不是多个

【解决方案2】：

它可能会起作用。

    files: FileList;
onChange(event: EventTarget) {
    let eventObj: MSInputMethodContext = <MSInputMethodContext>event;
    let target: HTMLInputElement = <HTMLInputElement>eventObj.target;
    this.files = target.files;
}

sendFilesToServer() {
    var formData = new FormData();
    for (var i = 0; i < this.files.length; i++) {
        formData.append('filesList[]', this.files[i], this.files[i].name);
    }
    var xhr = new XMLHttpRequest();
    xhr.open('POST', "submitFiles");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log("Files Uploaded")
        }
    }
    xhr.send(formData);
}

Java 代码

导入 org.springframework.stereotype.Controller；导入 org.springframework.web.bind.annotation.RequestMapping；导入 org.springframework.web.bind.annotation.RequestMethod；导入 org.springframework.web.bind.annotation.ResponseBody；导入 org.springframework.web.multipart.MultipartFile；导入 org.springframework.web.multipart.MultipartHttpServletRequest；导入 org.apache.commons.io.IOUtils； @控制器公共类 MyController { @ResponseBody @RequestMapping(value = "submitFiles", method = RequestMethod.POST) 公共字符串提交文件（MultipartHttpServletRequest 请求）{ 列出论文 = request.getFiles("filesList"); // 如果“filesList”不起作用，那么尝试“filesList[]” 尝试 { saveFilesToServer(论文); } 捕捉（异常 e）{ 返回“错误”； } 返回“成功”； } 公共无效 saveFilesToServer(List multipartFiles) 抛出 IOException { 字符串目录 = "/home/user/uploadedFilesDir/"; 文件文件 = 新文件（目录）；文件.mkdirs(); 对于（多部分文件多部分文件：多部分文件）{ 文件=新文件（目录+ multipartFile.getOriginalFilename（））； IOUtils.copy(multipartFile.getInputStream(), new FileOutputStream(file)); } } }

即使它不起作用，请尝试 classic method

**注意：**在html代码中不要忘记在元素中添加属性multiple。

<input name="papers" id="modalPapers" type="file" class="filestyle" multiple data-input="false">

【讨论】：