Question

我正在umbraco中使用自定义部分来显示用户发送的消息。我希望管理员能够通过将文件上传到消息本身来回答这些消息。这样，我将知道哪个文件属于哪个消息。我已经遵循了一些指南和建议，最引人注目的是 file-upload-in-backoffice-custom-section讨论如何从umbraco后台上传文件。

但是我的代码存在问题，它似乎并没有发送带有后期处理请求的整个文件，而只是发送文件的路径，该路径类似于：C：\ fakepath \ file.pdf

我的问题是如何在发布请求中发送整个文件，以及如何在API函数内部将文件捕获/转换为HttpPostedFileBase。如果我可以将文件获取为HttpPostedFileBase，我将知道如何将其上传到umbraco的媒体部分。

以下代码：

edit.html：

                    <umb-control-group label="File" description="File to upload">
                        <input type="file" class="umb-editor umb-textstring" ng-model="files" ng-change="fileSelected(files)" ng-multiple="false" />
                    </umb-control-group>
                </div>
            </div>
        </div>
    </umb-editor-container>

    <umb-editor-footer>
        <umb-editor-footer-content-right>
            <div class="umb-button ng-scope">           
                <button ng-click="OnSave()" class="btn umb-button__button btn-success umb-button--">
                    <span class="umb-button__content">
                        Save
                    </span>
                </button>
            </div>
        </umb-editor-footer-content-right>
    </umb-editor-footer>

edit.controller.js：

$scope.fileSelected = function (files) {
        $scope.file = files;
    };


    $scope.OnSave = function () {
            var request = {
                file: $scope.file
            };
            return $http({
                method: 'POST',
                url: "backoffice/Messages/MessagesApi/PostSaveFile",
                headers: { 'Content-Type': undefined },
                transformRequest: function (data) {
                    var formData = new FormData();
                    formData.append("file", data.file);
                    return formData;
                },
                data: request
            }).then(function (response) {
                if (response) {
                    var fileName = response.data;
                    return fileName;
                } else {
                    return false;
                }
            });

    };

MessagesApiController.cs：

public HttpResponseMessage PostSaveFile(HttpPostedFileBase file)
{
    var files = HttpContext.Current.Request;

    if (files != null && files.ContentLength > 0)
    {
        StreamReader reader = new StreamReader(files.InputStream);
        string responseFromServer = reader.ReadToEnd();
    }
    return Request.CreateResponse(HttpStatusCode.OK);
}

Answer 1

对于那些在Umbraco 8的自定义部分中忙于文件上传的人来说，这是我的解决方案：

查看：

<input type="file" class="umb-textstring" ngf-select="" ng-model="files" ng-multiple="false" ngf-change="fileSelected(files)" required />
<umb-button action="vm.clickUploadButton()"
            type="button"
            button-style="info"
            label="Upload">
</umb-button>

控制器：

function Controller($scope, Upload) {
    var vm = this;
    vm.clickUploadButton = clickUploadButton;

    $scope.fileSelected = function (files) {
        $scope.file = files;
    };

    function clickUploadButton() {
        if (!$scope.file)
            return false;

        Upload.upload({
            url: "backoffice/api/Upload/UploadFile",
            fields: {
                "field1": "value1",
                "field2": "value2"
            },
            file: $scope.file
        }).success(function (data, status, headers, config) {
            console.log(status);
            console.log(data);
        }).error(function (evt, status, headers, config) {
            console.log(evt.Message);
        });
    }
}

API控制器：

public class UploadController : UmbracoAuthorizedApiController
{
    [HttpPost]
    public HttpResponseMessage UploadFile()
    {
        var files = HttpContext.Current.Request.Files;
        var field1 = HttpContext.Current.Request.Form["field1"];
        var field2 = HttpContext.Current.Request.Form["field2"];

        return Request.CreateResponse(HttpStatusCode.OK, new { fileCount = files.Count, field1, field2 }) ;
    }
}

Answer 2

如果有人遇到此问题，这就是我设法解决的方法：

edit.html：

<umb-control-group label="Response File" description="File to upload">
      <input type="file" id="myFile" ng-multiple="false" />
</umb-control-group>

edit.controller.js：

 if ($element.find('#myFile')[0].files[0] !== undefined) {
                var fd = new FormData();
                fd.append('file', $element.find('#myFile')[0].files[0]);
                $http.post("backoffice/Messages/MessagesApi/PostSaveFile", fd, {
                    transformRequest: angular.identity,
                    headers: { 'Content-Type': undefined }
                }).success(function (response) {
                    console.log(response);
                });
            }

MessagesApiController.cs：

public string PostSaveFile()
{
    var file = HttpContext.Current.Request.Files["file"];
    return file.FileName;
}

变量文件现在是HttpPostedFile，您可以将其用于保存到媒体部分的任何操作。

如何将文件从umbraco后台上传到媒体部分？

2 个答案: