Question

您好我想上传多个文件并将其发送到服务器：使用被动形式：我在适当的类中定义了这个：

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或者是否有其他解决方案）提前谢谢

Answer 1

Please Try this code

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;
            }
        }

    }

Answer 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代码


    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;
    import org.apache.commons.io.IOUtils;

    @Controller
    public class MyController {

      @ResponseBody
      @RequestMapping(value = "submitFiles", method = RequestMethod.POST)
      public String submitPapers(MultipartHttpServletRequest request) {

        List  papers = request.getFiles("filesList");
    // If "filesList" doesn't work then try "filesList[]"
        try {
          saveFilesToServer(papers);
        } catch (Exception e) {
          return "error";
        }
        return "success";
      }

      public void saveFilesToServer(List multipartFiles) throws IOException {
        String directory = "/home/user/uploadedFilesDir/";
        File file = new File(directory);
        file.mkdirs();
        for (MultipartFile multipartFile : multipartFiles) {
            file = new File(directory + 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">

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

2 个答案: