Angular 2 - 如何上传文件并存储在本地文件夹中

Question

例如，我在src文件夹下创建了一个名为“upload”的文件夹。

html文件：

$('.menu-content > ul > li.parent > .child-menu > ul > li > a').prepend(function(i) {
  var idx = $(this).closest('li').index();
  return ('00' + (idx + 1)).slice(-2) + ' ';
});

upload-modal.component.ts文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-content">
  <ul>
    <li><a href="/"><span>Home</span></a></li>
    <li class="parent" transform="100">
      <a href="/" class="js-open-child-menu">
        <span>Our Services</span>
        <span class="angle">/</span>
        <i class="fa fa-angle-right"></i>
      </a>
      <div class="child-menu">
        <ul>
          <li class="parent" transform="200">
            <a href="/" class="js-open-child-menu">
              <span>Business &amp; Commercial Law</span>
              <span class="angle">/</span>
              <i class="fa fa-angle-right"></i>
            </a>
            <div class="child-menu">
              <ul>
                <li class="a-link-146"><a href="/"><span>Banking &amp; Finance</span></a></li>
                <li class="a-link-147"><a href="/"><span>Buying or Selling a Business</span></a></li>
                <li class="a-link-148"><a href="/"><span>Commercial Contracts &amp; Agreements</span></a></li>
                <li class="a-link-149"><a href="/"><span>Liquor Licensing</span></a></li>
              </ul>
            </div>
          </li>
          <li class="parent" transform="200">
            <a href="/" class="js-open-child-menu">
              <span>Debt Recovery &amp; Insolvency</span>
              <span class="angle">/</span>
              <i class="fa fa-angle-right"></i>
            </a>
            <div class="child-menu">
              <ul class="m-main-menu-child">
                <li class="a-link-150"><a href="/"><span>Debt Recovery</span></a></li>
                <li class="a-link-151"><a href="/"><span>Insolvency</span></a></li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </li>
    <li class="a-link-129"><a href="/"><span>Careers</span></a></li>
    <li class="a-link-130"><a href="/"><span>Contact</span></a></li>
    <li class="parent" transform="100">
      <a href="/" class="js-open-child-menu">
        <span>Our Services</span>
        <span class="angle">/</span>
        <i class="fa fa-angle-right"></i>
      </a>
      <div class="child-menu">
        <ul>
          <li class="parent" transform="200">
            <a href="/" class="js-open-child-menu">
              <span>Business &amp; Commercial Law</span>
              <span class="angle">/</span>
              <i class="fa fa-angle-right"></i>
            </a>
            <div class="child-menu">
              <ul>
                <li class="a-link-146"><a href="/"><span>Banking &amp; Finance</span></a></li>
                <li class="a-link-147"><a href="/"><span>Buying or Selling a Business</span></a></li>
                <li class="a-link-148"><a href="/"><span>Commercial Contracts &amp; Agreements</span></a></li>
                <li class="a-link-149"><a href="/"><span>Liquor Licensing</span></a></li>
              </ul>
            </div>
          </li>
          <li class="parent" transform="200">
            <a href="/" class="js-open-child-menu">
              <span>Debt Recovery &amp; Insolvency</span>
              <span class="angle">/</span>
              <i class="fa fa-angle-right"></i>
            </a>
            <div class="child-menu">
              <ul class="m-main-menu-child">
                <li class="a-link-150"><a href="/"><span>Debt Recovery</span></a></li>
                <li class="a-link-151"><a href="/"><span>Insolvency</span></a></li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

当我点击上传按钮时，我在控制台日志中发现此错误= http://localhost:3000/upload 404（未找到）
我想这必须与路由有关。以前有人有经验吗？

Answer 1

希望这会有所帮助：完整的代码。

您需要运行此cmd：npm i ng2-file-upload --save

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

演示：http://valor-software.com/ng2-file-upload/

Answer 2

您可以这样操作：

//in html
<input type="file" (click)="handleFileInput($event.target.value)">

//in .ts file
handleFileInput(file: FileList) {
    this.fileToUpload = file.item(0);
}

您可以将this.fileToUpload附加到formdata。