如何使用文件上传选项在angular2中进行简单的自定义拖放功能

Question

请检查代码HTML文件

<div class='multiple'><span *ngFor="let filename of fileList" class="fileLoaded">{{filename}}<dew-icon [options]="{icon:'cross'}" (click)="deleteItem(filename)" class="file-close"></dew-icon>
</span>
</div>
<label for="file-upload-{{Id}}" class="custom-file-upload">
    <span><dew-icon class='sizeIcon' [options]="{icon:'lnr lnr-move'}"></dew-icon></span>
    <i class="fa fa-cloud-upload"></i> Drag and Drop /Browse
</label>
<input accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,text/plain,image/jpeg,image/gif,image/png,image/tiff,image/vnd.dwg,application/zip,application/x-rar-compressed,application/step,application/iges" id="file-upload-{{Id}}" multiple (change)="onChange($event)" sm="25" type="file" />

请检查代码ts文件

从'@ angular / core'导入{Component，OnInit，Input，Output，EventEmitter};

@Component({
  selector: 'dew-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.less']
})
export class FileUploadComponent implements OnInit {

  @Input() Id: String;
  public fileList = [];
  constructor() {
  }

  @Output() fileObject = new EventEmitter();
  ngOnInit() {
  }

  onChange(event: any) {
    let files = [].slice.call(event.target.files);
    // input.value = files.map(f => f.name).join(', ');
    let multFile = files.map(f => f.name);
    for (let entry of multFile) {
      var found = false;

      for (let existFile of this.fileList) {

        console.log(entry.indexOf(existFile));
        if (entry.indexOf(existFile) != -1) {

          found = true;

        }

      }

      if (found == false) {

        this.fileList.push(entry);

      }
    }
    this.fileObject.emit(files);
  }

  deleteItem(obj) {
    for (let i = 0; i < this.fileList.length; i++) {
      if (obj == this.fileList[i]) {
        this.fileList.splice(i, 1);
        break;
      }
    }
  }

}

请让我知道如何与文件上传一起实现拖放功能。

Answer 1

对于拖放功能，可以使用Angular的组件库！ 查看以下三个中的任何一个：

https://github.com/valor-software/ng2-dragula

https://github.com/akserg/ng2-dnd

https://github.com/ObaidUrRehman/ng2-drag-drop

此外，Angular组件库还包含文件上传选项：

https://github.com/valor-software/ng2-file-upload

https://github.com/jkuri/ngx-uploader

有许多方法可以实现所需的功能，但是利用其中的某些组件应该可以使您的生活更加轻松。

这些组件中每个组件的安装过程和实现在其各自存储库的README.md文件中进行了说明！

祝好运！