0

嘿伙计们，我在如何使用 angularjs 和 flowjs 上传和保存图像时遇到了一些问题。

我是 angularjs 的新手，在尝试上传图片时遇到了问题，但我让它与 ng-flow 一起工作，但在尝试将图片保存到某个设计的路径时仍然遇到一些问题。

一个示例和类似的问题是如何以及在何处使用 ng-flow 保存上传的文件？，但我仍然无法让它工作。

这是上传和预览的代码，到目前为止运行良好：

<div class="ng-scope add-file" flow-init="{target:'../WebService/WebService.asmx/setImage'}"
 flow-name="image.flow" flow-files-submitted="$flow.upload()"
 flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
<div class="row" style="margin-top: 0px!important;">
    <div class="col-sm-10">
        <p><label for="image">ADD PHOTO</label></p>
        <table style="border: 0px;">
            <tr>
                <td ng-repeat="file in $flow.files" class="ng-scope thumbnail" style="margin: 3px 3px 3px 3px;">
                    <div class="text-right">
                        <a class="glyphicon glyphicon-remove" ng-click="file.cancel()"
                           style="color:#ff4b4b; text-decoration: none!important;"></a>
                    </div>
                    <div class="frame" ng-show="$flow.files.length" style="min-width: 210px!important;">
                        <span class="helper"></span>
                        <img flow-img="file" src="" class="image-thumbnail">
                    </div>
                    <div class="progress progress-striped" ng-class="{active: file.isUploading()}">
                        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                             aria-valuemax="100" ng-style="{width: (file.progress() * 100) + '%'}">
                        </div>
                        <span class="sr-only ng-binding">1% Complete</span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="col-sm-2 text-right drop" flow-drop="" ng-class="dropClass">
        <span class="file-upload btn btn-primary" flow-btn="">
            Choose file
            <input type="file" multiple="multiple" style="visibility: hidden; position: absolute;">
        </span>
    </div>
</div>

但这是问题所在，我不知道如何或如何在某些路径中创建此图像...

我将我的 webservice 方法传递给 ng-flow-init，因为它将通过如下 url 参数发送：

flow-init="{target:'../WebService/WebService.asmx/setImage'}"

并且 ws 像以下示例一样接收它：

../setImage?flowChunkNumber=1&flowChunkSize=1048576&flowCurrentChunkSize=198637&flowTotalSize=198637&flowIdentifier=198637-1jpg&flowFilename=1.jpg&flowRelativePath=1.jpg&flowTotalChunks=1

    'flowChunkNumber=1
    'flowChunkSize=1048576
    'flowCurrentChunkSize=111168
    'flowTotalSize = 111168
    'flowIdentifier=111168-Figura1png
    'flowFilename=Figura1.png
    'flowRelativePath=Figura1.png
    'flowTotalChunks = 1

我应该如何处理这些信息，或者我需要什么来发送数据（二进制、base64 等）并在我的服务器上保存/创建图像？

编辑 1：我已经知道我需要文件数据，并认为我确实需要一个upload.php来转换和发送文件。仍然想不出如何为 vb.net 创建一个 upload.php

4

1 回答 1

1

经过长时间的搜索后，我决定继续前进并采用完全不同的方式，我删除了几乎所有的自定义 CSS 和样式，以使其更易于阅读。

在进行任何更改之前，我不再使用 ng-flow，它纯粹是 angularjs 和 javascript，我将文件编码为Base64并在我的服务器端对其进行解码。

HTML：

<div class="row">
<div class="col-sm-10">
    <table>
        <tr>
            <td ng-repeat="image in images">
                <div>
                    <img id="imagePreview{{$index}}" src="#" alt="" />
                </div>
            </td>
        </tr>
    </table>
</div>
<div class="col-sm-2 text-right">
    <input type="file" id="img" />

    <button ng-click="addImage()" type="button">ADD</button>
</div>
</div>

AngularJS 控制器：

    $scope.images = [];

//Don't let the same file to be added again
$scope.removeImage = function (index) {
    $scope.images.splice(index, 1);
}

//Add new file to $scope.images
$scope.addImage = function () {

    var
      reader = new FileReader(),
      $img = $("#img")[0],
      index = $scope.images.length;

    reader.onload = function (e) {

        if ($scope.images.indexOf(e.target.result) > -1) return;

        $scope.images.push(e.target.result);
        if (!$scope.$$phase) $scope.$apply();

        $("#imagePreview" + index).attr('src', e.target.result);

        $scope.uploadImage(index);
    }

    reader.readAsDataURL($img.files[0]);
};

这里是如何将文件转换为Base64：

$scope.uploadImage = function (index) {
    var res = $scope.images[index];
    //{...} Your code here, method call etc.
}
于 2014-10-01T18:28:33.513 回答