Question

我在尝试使用此处列出的addInitialFiles方法时遇到问题：

http://docs.fineuploader.com/branch/master/api/methods.html#addInitialFiles

我的chrome dev控制台中出现javascript错误：

1032:381 Uncaught TypeError: uploader.addInitialFiles is not a function

这是我用来初始化Fine Uploader的代码，并将调用设为 addInitialFiles（）：

<script type="text/javascript">
$(function () {
    var uploader = $('#fine-uploader').fineUploaderS3({
        request: {
            endpoint: "myfineuploaderbucket.com.s3.amazonaws.com",
            accessKey: "XXXXXXXXXXXXXXXXXXXXXXXX",
        },
        signature: {
            endpoint: "/SignatureHandler",
            version: 4
        },
        validation: {
            allowedExtensions: ["gif", "jpeg", "jpg", "png", "bmp"],
            acceptFiles: "image/gif, image/jpeg, image/png, image/bmp",
            sizeLimit: 5000000,
            itemLimit: 3
        },
        retry: {
            enableAuto: true
        },
        deleteFile: {
            enabled: true,
            endpoint: "/DeleteImage/?id=@Model.Id",
            method: 'POST',
        },
        paste: {
            targetElement: $(document),
            promptForName: true
        },
        uploadSuccess: {
            endpoint: "/UploadSuccessful/?id=@Model.Id"
        },
        iframeSupport: { //This path needs to be a blank HTML page and is used for fine-uploader to support IE9 and older
            localBlankPagePath: "/Blank"
        },
        objectProperties: {
            acl: "public-read",
            key: function (fileId) {
                var re = /(?:\.([^.]+))?$/;
                fileExt = re.exec($("#fine-uploader").fineUploader("getName", fileId))[0];
                uuid = $("#fine-uploader").fineUploader("getUuid", fileId);
                filename = uuid + fileExt;
                key = "/@ViewBag.Id + "/" + filename;
                return key;
            }
        },
        scaling: {
            hideScaled: true,
            sizes: [
                { name: "small", maxSize: 350 },
                { name: "large", maxSize: 800 },
            ]
        },
        callbacks: {
            onDelete: function (id) {
                if (id == 2) {
                    $("#fine-uploader").fineUploader("deleteFile", 0);
                    $("#fine-uploader").fineUploader("deleteFile", 1);
                }
            },
        },
    });

    uploader.addInitialFiles([
            {
                "name": "a3ef2360-881d-452c-a5f6-a173d5291066.jpg",
                "uuid": "a3ef2360-881d-452c-a5f6-a173d5291066",
                "size": "66000",
                "thumbnailUrl": "https://s3.amazonaws.com/myfineuploaderbucket.com/1032/ecdca7bb-fb02-4072-b526-4e51cedb1f2b.jpg",
                "s3Key": "1032/a3ef2360-881d-452c-a5f6-a173d5291066.jpg",
                "s3Bucket": "myfineuploaderbucket.com"
            }
    ]);

我做错了吗？ addInitialFiles不是一个方法，而是一个在创建Fine Uploader实例时需要初始化的选项吗？我已经尝试将“addInitialFiles”添加到Fine Uploader实例的选项中，并且我没有收到javascript错误，但它也没有加载初始文件。

我使用的是最新版本5.7.1。

Answer 1

就像任何其他jQuery插件一样，Fine Uploader jQuery包装器返回一个jQuery包装的元素。这意味着您正在尝试在jQuery对象上调用addInitialFiles方法。当然，这种方法不存在。如果您真的想继续使用jQuery包装器，则必须将uploader.addInitialFiles(...)更改为uploader.fineUploaderS3('addInitialFiles', ...)。

但是你应该知道you don't need jQuery的任何一个，特别是在使用Fine Uploader时。有no benefit to using the jQuery wrapper with Fine Uploader，您只需通过放弃包装器（并保存几个字节）并将Fine Uploader初始化的前几行更改为：

即可修复代码。

var uploader = new qq.s3.FineUploader({
   element: document.querySelector('#fine-uploader'),
   ...
})

现在，uploader.addInitialFiles正常运作。

使用addInitialFiles方法时出错

1 个答案: