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

Question

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

但是我的代码的问题是它似乎没有发送整个文件和 post 请求，只是文件的路径变得类似于：C:\fakepath\file.pdf

我的问题是如何在 post 请求中发送整个文件，以及如何在 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

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

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，您可以随意使用它，例如将其保存到媒体部分。

Answer 2

对于那些在 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 }) ;
    }
}