Question

我是Aurelia的新手，也是Node JS的初学者。我正在努力整理一个功能齐全的文件上传。我已经阅读了几个教程（例如这里的这个：http://www.petermorlion.com/file-upload-with-aurelia），尝试了各种各样的东西。但是，通过有趣的名称浏览所有这些库，并且弄清楚如何将文件上传器这样简单的东西拉到一起，这是相当混乱的。

我是一款基于导航骨架的小型测试应用： https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext

我要求的最好是基于Aurelia骨架的完整小文件上传示例。

对于它的价值，下面是我的代码。

这是upload.html：

<template>
  <require from="./blob-to-url"></require>
  <require from="./file-list-to-array"></require>
  <require from="./upload"></require>

  <section class="au-animate">
    <h2>${heading}</h2>
    <div>
      <div class="col-md-2">
        <ul class="well nav nav-pills nav-stacked">
          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
            <a href.bind="row.href">${row.title}</a>
          </li>
        </ul>
      </div>
      <div class="col-md-10" style="padding: 0">
        <input type="file" multiple accept="image/*" files.bind="selectedFiles" change.delegate="onSelectFile($selectedFiles)"></input>
          <ul>
            <li repeat.for="file of selectedFiles | fileListToArray">
              <img src.bind="file | blobToUrl" />
              <p>${file.name}: ${file.type} ${file.size / 1000} kb</p>
              <p>Last Modified: ${file.lastModifiedDate}</p>
            </li>
          </ul>
      </div>
    </div>
  </section>
</template>

这是upload.js：

export class UploadRouter {
  heading = 'Upload Form';
  //upload = multer({ dest: 'uploads/' });
  //selectedFiles;

  fileListToArr(fileList) {
    let files = [];
    if (!fileList) {
      return files;
    }
    for(let i = 0; i < fileList.length; i++) {
      files.push(fileList.item(i));
    }
    return files;
  }

  onSelectFile(selectedFiles)
  {
    let formData = new FormData()
    let fileArray = this.fileListToArr(selectedFiles)

    for (let i = 0; i < fileArray.length; i++) {
      formData.append('images', fileArray[i]);
    }

    console.log("Uploaded successfully...");

    return http.fetch(url + "/", {
      method: 'put',
      body: formData,
    })
      .then(response => {
        console.log("Uploaded successfully...");
        return response
      })
      .catch(error => {
        console.log("Some Failure...");
        throw error.content;
      })
  }
}

文件列表到array.js：

export class FileListToArrayValueConverter {
  toView(fileList) {
    let files = [];
    if (!fileList) {
      return files;
    }
    for(let i = 0; i < fileList.length; i++) {
      files.push(fileList.item(i));
    }
    return files;
  }
}

团块到url.js：

export class BlobToUrlValueConverter {
  toView(blob) {
    return URL.createObjectURL(blob);
  }
}

Answer 1

我使用了Orkhan Alikhanov的回答@ How to Upload Image Via WebApi

我使用了勺子Aurelia-api，它是Aurelia-fetch-client的一个包装器，如果完全没有使用多部分表单数据，我似乎都运行不好，我试了好几个小时来获得一个正确的帖子请求格式化没有运气。将文件作为字节数组发送到json对象中可以很好地完成这一操作，当然您需要进行一些长度检查，但这是非常简单易用且有效的解决方案。

Aurelia：真正有用的文件上传示例（并保存上传的文件）

1 个答案: