Question

我正在尝试使用FineUploader实现文件上传。一切都在工作，除了实际上传 - 当我选择一个文件时，它会立即添加到页面上，说“上传失败”。查看Firefox检查器中的“网络”选项卡，甚至没有发生POST请求，我从FineUploader收到一条错误消息，指出响应无效JSON（如图）。

这是我的客户端（部分）视图：

<div id="fine-uploader"></div>

@* This section is rendered into the page header *@
@section Scripts {
    <script src="/Scripts/fine-uploader/jquery.fine-uploader.js"></script>
    <link href="/Scripts/fine-uploader/fine-uploader-new.css" rel="stylesheet" />

    @* The following template is copied from the Validation example at https://fineuploader.com/demos.html in the jQuery tab *@
    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Select files</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
                    <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>

            <dialog class="qq-alert-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Close</button>
                </div>
            </dialog>

            <dialog class="qq-confirm-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">No</button>
                    <button type="button" class="qq-ok-button-selector">Yes</button>
                </div>
            </dialog>

            <dialog class="qq-prompt-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <input type="text">
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
                    <button type="button" class="qq-ok-button-selector">Ok</button>
                </div>
            </dialog>
        </div>
    </script>    
}

<script>
    $("#fine-uploader").fineUploader({
        template: "qq-template",
        request: {
            // Generates the following absolute URL (have also tried relative, neither work)
            // http://localhost:49450/MyController/UploadFile
            endpoint: "@Url.Action("UploadFile", "My", null, Request.Url.Scheme)"
        },
        debug: true,
        thumbnails: {
            placeholders: {
                waitingPath: "@Url.Content("~/Scripts/fine-uploader/placeholders/waiting-generic.png")",
                notAvailablePath: "@Url.Content("~/Scripts/fine-uploader/placeholders/not_available-generic.png")"
            }
        },
        validation: {
            allowedExtensions: ["jpg", "png"],
            sizeLimit: 1048576 // 1 MB = 1024 * 1024 bytes
        },
        text: {
            fileInputTitle: ""
        }
    });
</script>

我的MVC 4控制器代码（FineUpload是来自同名nuget包的类）：

public class MyController : Controller {
    // This method is never being hit
    [HttpPost]
    public FineUploaderResult UploadFile(FineUpload qqfilename) {
        return new FineUploaderResult(true);
    }
}

这是尝试上传后Firefox的控制台日志（我已经省略了关于缩略图加载等之前的所有成功消息）：

[Fine Uploader 5.16.2] Sending simple upload request for 0
util.js:236:16
[Fine Uploader 5.16.2] xhr - server response received for 0
util.js:236:16
[Fine Uploader 5.16.2] responseText =
util.js:236:16
[Fine Uploader 5.16.2] Received response status 0 with body:
util.js:236:16
[Fine Uploader 5.16.2] Error when attempting to parse xhr response text (JSON.parse: unexpected end of data at line 1 column 1 of the JSON data)
util.js:241:20
[Fine Uploader 5.16.2] Simple upload request failed for 0
util.js:236:16

代码看起来很好，但网络活动日志显示根本没有发出POST请求。为什么会这样？

Answer 1

最后解决了这个问题。我仍然不确定问题出在哪里，但是我发现通过将请求端点更改为控制器的Index页（/My/Index），可以成功达到该方法（并在{{ 1}}行），所以我只调用了我的上载方法responseText =（MVC允许，因为上载方法响应POST，而实际索引响应GET）和ta-da，一切正常。

有史以来最奇怪的错误。

FineUploader无法发布

1 个答案: