时间戳

首页 > 解决方案 > 需要在角度模式确认框中单击“是”时上传所选文件

angular - 需要在角度模式确认框中单击“是”时上传所选文件

问题描述

我是 Web 开发新手，在实现上传功能时遇到问题。在这里，选择要上传的文件时会发生一个确认框，然后单击“是”按钮将数据上传到服务器。没有单独的上传按钮

我在选择文件时收到确认框。但不确定如何直接将数据上传到服务器

组件.html：

<div style="text-align: center">
        <div class="col-xs-9">
        <div class="form group">
        <label for="Upload" style="display: block;">Please select file to upload</label>
        <input type="File" id="btnUpload" name="Upload" value="Upload" (change)="Onselect($event)" style="padding-left: 450px;" #Upload />
        </div>
    </div>
    </div>

      <div *ngIf="filesIsSelected"
           <div class="modal-dialog">
             <div class="modal-content">
              <div class="modal-header">    
                <h4 class="modal-title">Confirm</h4>
              </div>
              <div class="modal-body">
                <p>Do you want to upload selected file?</p>
                <div align= center>
                    <button type="button" class="btn btn-danger" data dismiss="modal">
                      <span class="glyphicon glyphicon-remove"></span> No
                    </button>
                    &nbsp;&nbsp;
                    <button type="button" class="btn btn-success" data-dismiss="modal" (click)="proceedUpload()">
                      <span class="glyphicon glyphicon-floppy-disk"></span>Yes
                    </button>
                  </div>          
              </div>       
            </div>      
          </div>
        </div>

组件.ts：

Onselect(event){
debugger;
if(event.target.files && event.target.files.length > 0) {
          this.filesIsSelected = true;
          const files = event.target.files;
          for (let i = 0; i < files.length; ++i) {
            const file = files[i];
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {
              this.fileToUpload.push({
                filenameWithExt: file.name,
                filename: file.name.split('.')[0],
                filetype: file.type,

              });
            };
          }
        }   
  else
      {
          this.filesIsSelected = false;
      }         
   }
   proceedUpload(){

      let formData: FormData = new FormData();
      formData.append('Upload Files', fileToUpload);

      this.http.post("url",  formData ).map(res => res.json())  
      .catch(error => Observable.throw(error))  
      .subscribe(  
      data => console.log('success'),  
      error => console.log(error)  
      )  

    }       
      }

proceedUpload() 是我需要帮助的部分。单击“是”后，我无法找到访问所选文件并将其直接上传到服务器的方法。

标签： angularbootstrap-modal

解决方案

我认为您应该在文件输入的“onChange”方法中实现一些功能，以准备要发送的图像：

function prepareMyImg(event){    
     if (event.target.files && event.target.files.length > 0) {
        const files = event.target.files;
        for (let i = 0; i < files.length; ++i) {
          const file = files[i];
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            this.imagenes.push({
              filenameWithExt: file.name,
              filename: file.name.split('.')[0],
              filetype: file.type,
              data: reader.result.split(',')[1]
            });
          };
        }
      }
}

然后，当您进行Upload() 时，您只需添加图像对象数组。

formData.append('Files', this.imagenes);

此处提供可能的工作解决方案：https ://stackblitz.com/edit/angular-6gbbje

推荐阅读