javascript - 通过 AJAX 提交表单后使用 Uppy 上传文件

Question

我正在使用Uppy文件上传器来上传文件。现在我有一个以 AJAX 形式发送数据的表单，服务器将表单数据存储在 DB 中。除了表单，我想将 Uppy 文件附加到表单中上传的记录中。因此，一旦记录和文件上传，我希望从服务器返回成功消息，

如何触发文件上传和表单提交？

//下面是AJAX请求

jQuery.ajax({
    type: "POST",
    url:
        $("#expense_id").val() == ""
            ? "/purchases/expenses/store"
            : "/purchases/expenses/update",
    data: $("#addExpenseForm").serialize(),
    success: function(data) {
        if (data.val == 1) {
            //Success notification..
            _Notification(data);
    },
    error: function(xhr) {
        $("#errors").text("");
        jQuery.each(xhr.responseJSON.errors, function(key, value) {
            $("#errorbox").show();
            $("#errors").append("<p>" + value + "</p>");
        });
    }
}); //AJAX End

//下面是Uppy上传功能

var _StoreExpenseFile = function() {
    const XHRUpload = Uppy.XHRUpload;
    const Dashboard = Uppy.Dashboard;

    var id = "#storefile";
    var expense_id = $("#id").val();

    var options = {
        proudlyDisplayPoweredByUppy: false,
        target: id,
        inline: true,
        replaceTargetContent: true,
        showProgressDetails: true,
        note: "Only PDF, jpeg, img, files allowed.",
        height: 470,
        metaFields: [
            { id: "name", name: "Name", placeholder: "file name" },
            {
                id: "caption",
                name: "Caption",
                placeholder: "describe what the image is about"
            }
        ],
        browserBackButtonClose: true
    };

    var uppyDashboard = Uppy.Core({
        autoProceed: false,
        restrictions: {
            maxFileSize: 5000000, // 1mb
            maxNumberOfFiles: 5,
            minNumberOfFiles: 1
        },
        meta: {
            expense_id: expense_id //Pass additional meta data for process.
        }
    });

    uppyDashboard.use(Dashboard, options);
    uppyDashboard.use(XHRUpload, {
        endpoint: "/files/store/expensefile",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
        },
        formData: true,
        fieldName: "file"
    });
};

标签： javascriptjqueryajaxuppy