如何使用ng-flow VB.NET保存上传的图像

Question

嘿，伙计们，我有一些问题，如何上传和保存图片使用angularjs和流。

我刚接触到angularjs，在上传图片时遇到了一些问题，但是我让它和ng流一起工作，但是我还是遇到了一些问题，试图将图像保存到某个设计的路径上。

一个例子和类似的问题是这个How and where save uploaded files with 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>

​

但问题是，我不知道该怎么做才能在某条道路上创造出这个形象.

我将传递给ng-flow init我的webservice方法，因为它将通过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创建一个vb.net

Answer 1

经过很长一段时间的搜索，我决定继续前进，用一种完全不同的方式做，我删除了我所有的自定义css和样式，以使它更干净的阅读。

在做任何更改之前，我已经不再使用ng流了，它纯粹是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.
}