0

如果这是一个非常基本的问题，我是 Angular 的新手，很抱歉。

我构建了一个客户端-服务器应用程序，它允许上传文件，然后验证它们（一些内部规则）并返回日志文件以防验证失败。

我在客户端使用Angular File Upload模块，这个简单的例子。

服务器的响应如下所示（JSON）

{"status":"FAILED","entity":"download/logs/24f307d3-8964-4a5b-8d66-0763503892b1/","errors":[]}

我想要做的是为每个文件上传下载链接（来自 response.entity）。

我得到的是所有文件的相同链接（最后一个文件中的那个）

当我检查调试模式 (F12) 中发生的情况时，我确实看到参数正在更改，但不知何故，它们被最后一个参数覆盖了。

我认为我必须以某种方式使用 ng-repeat，但问题是它已经被用于其他列。

请帮忙。

我的 html 表：

<table class="table">
  <thead>
    <tr>
      <th width="50%">Name</th>
      <th ng-show="uploader.isHTML5">Size</th>
      <th ng-show="uploader.isHTML5">Progress</th>
      <th>Status</th>
      <th align="justify">Actions</th>
      <th>Valid</th>
      <th>Log</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in uploader.queue">
      <td>{{ item.file.name }}</td>
      <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
      <td ng-show="uploader.isHTML5">
        <div class="progress" style="margin-bottom: 0;">
          <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
        </div>
      </td>
      <td class="text-center">
        <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
        <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
        <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
      </td>
      <td nowrap>
        <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
          <span class="glyphicon glyphicon-upload"></span> Upload
        </button>
        <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
          <span class="glyphicon glyphicon-ban-circle"></span> Cancel
        </button>
        <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
          <span class="glyphicon glyphicon-trash"></span> Remove
        </button>
      </td>
      <td ng-show="item.isSuccess">
        {{this.uploader.validationStatus }}
      </td>
      <td ng-show="uploader.showLog">
        <a href={{this.uploader.logURL}} target="_blank">Log</a>
      </td>
    </tr>
  </tbody>
  </table>

我说的是最后两列：

  <td ng-show="item.isSuccess">
    {{this.uploader.validationStatus }}
  </td>
  <td ng-show="uploader.showLog">
    <a href={{this.uploader.logURL}} target="_blank">Log</a>
  </td>

我在 controller.js 文件中做了以下更改：

uploader.onCompleteItem = function(fileItem, response, status, headers) {
    console.info('onCompleteItem', fileItem, response, status, headers);
    var resp = JSON.stringify(response.entity);

    if (resp == "\"Success\"") {
      this.validationStatus = "Yes";
      this.showLog = false;
    } else {
      this.validationStatus = "No";
      this.logURL = resp.replace(/\"/g, "");
      this.showLog = true;
    }

解决方案：

controllers.js 文件中的更改：

uploader.onCompleteItem = function(fileItem, response, status, headers) {
  console.info('onCompleteItem', fileItem, response, status, headers);
  if (response.status === 'FAILED') {
    fileItem.validationStatus = "No";
    fileItem.logUrl = response.entity;
    fileItem.showLog = true;

  } else {
    fileItem.validationStatus = "Yes";
    fileItem.showLog = false;
  }
};

html文件的变化：

<td ng-show="item.isSuccess" ng-class="{green: item.validationStatus == 'Yes', red: item.validationStatus == 'No'}">
  {{item.validationStatus}}
</td>
<td ng-show="item.showLog">
  <a href={{item.logUrl}} target="_blank">Log</a>
</td>
4

2 回答 2

0

下一行

this.logURL = resp.replace(/\"/g, "");

在每个新文件上传完成时覆盖 logUrl 值并将其保存在上传器对象上。这就是为什么您只能看到 uploader.queue 中每个项目的最后一个值

尝试将每个 URL 分别保存在字典对象中，使用文件名作为键，然后在ng-repeat迭代期间相应地引用 url 信息

例如，它可以是这样的：

uploader.onCompleteItem = function(fileItem, response, status, headers) {

    console.info('onCompleteItem', fileItem, response, status, headers);
    var resp = JSON.stringify(response.entity);
    this.logUrlList = {};
    if(resp=="\"Success\""){
        this.validationStatus = "Yes";
        this.showLog = false;
    }else{
        this.validationStatus = "No";
        this.logUrlList[fileItem.file.name] = resp.replace(/\"/g, "");
        this.showLog = true;

    }
 }

html 将是这样的：

 <td ng-show="uploader.showLog">
     <a href={{this.uploader.logUrlList[item.file.name]}} target="_blank">Log</a>
 </td>
于 2015-07-16T09:53:52.457 回答
0

我得到了这个工作！

我来自服务器的 json 响应：

{"filename":"Hypnotoad.mp4","link":"/hypnotoad.mp4","size":1858796}

那是我的控制器：

uploader.onSuccessItem = function(fileItem, response, status, headers) {
    console.info('onSuccessItem', fileItem, response, status, headers);
    fileItem.file.link = JSON.stringify(response.link).replace(/\"/g, "");
    fileItem.file.linkname = JSON.stringify(response.filename).replace(/\"/g, "");
};

还有我的html：

<td ng-show="uploader.isHTML5">
    <a href={{item.file.link}} target="_blank">{{item.file.linkname}}</a>
</td>

上面的示例也适用，但仅适用于队列中的最后一个元素。我的示例适用于队列中的所有元素。

于 2015-11-01T13:15:02.537 回答