Question

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

我是angularjs的新手并且在尝试上传图片时遇到了问题，但我使用了ng-flow，但是我在尝试将图像保存到某个设计路径时遇到了一些问题。

一个例子和类似的问题是这个问题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创建upload.php

Answer 1

经过很长一段时间的搜索，我决定继续前进并采用完全不同的方式，我删除了几乎所有的自定义CSS和样式，使其更加干净。

之前我改变了一些东西，比如我不再使用ng-flow了，它纯粹是angularjs和javascript，我将文件编码为 Base64 并在我的服务器端对其进行解码。 / p>

<强> 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.
}

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

1 个答案: