SweetAlert2 队列中的文件上传

Question

我尝试使用SweetAlert2 实现上传向导，但我不知道如何在队列结果中获取可能的文件数据。

下拉菜单的第一步没问题，但文件是异步读取的，结果对象中没有数据。

我可能需要等待 FileReader.read() 结果，但不知道该怎么做。

到目前为止，这是我的代码：

import swal from 'sweetalert2';

const dataContainer = document.querySelector(".hidden-data-container");

const dataLabs = JSON.parse(dataContainer.dataset.choiceLabo);
const dataBacteries = JSON.parse(dataContainer.dataset.choiceBactery);

let choiceLab = {};
let choiceBactery = {};

dataLabs.forEach(function (lab) {
    choiceLab[lab.id] = lab.name;
});
dataBacteries.forEach(function (bactery) {
    choiceBactery[bactery.code] = bactery.shortname;
});

document.querySelector("#start-upload").addEventListener('click', () => {
    swal.mixin({
        input: 'text',
        confirmButtonText: 'Next →',
        showCancelButton: true,
        progressSteps: ['1', '2', '3']
    }).queue([
        {
            title: 'foo',
            text: 'Quelle est la bactérie concernée ?',
            input: 'select',
            inputOptions: choiceBactery,
            inputPlaceholder: 'Selectionnez une bactérie',
        },
        {
            title: 'Select image',
            input: 'file',
            inputAttributes: {
                'accept': 'image/*',
                'aria-label': 'Upload your profile picture'
            },
            showCancelButton: true,
            confirmButtonText: 'Upload',
            showLoaderOnConfirm: true,
            preConfirm: (file) => {
                if (file) {
                    const reader = new FileReader;
                    reader.onload = (e) => {
                        debugger;
                        return {
                            title: 'Your uploaded picture',
                            imageUrl: e.target.result,
                            imageAlt: 'The uploaded picture'
                        }
                    };
                    reader.readAsBinaryString(file);
                }
            },
            allowOutsideClick: () => !swal.isLoading()
        }
    ]).then((result) => {
        if (result.value) {
            swal({
                title: 'All done!',
                html:
                    'Your answers: <pre><code>' +
                    JSON.stringify(result.value) +
                    '</code></pre>',
                confirmButtonText: 'Lovely!'
            })
        }
    });
});

任何帮助表示赞赏;)

谢谢， 杰米

Answer 1

我终于找到了使用 Promise 函数的解决方案：

import swal from 'sweetalert2';
import 'babel-polyfill';

const dataContainer = document.querySelector(".hidden-data-container");

const dataLabs = JSON.parse(dataContainer.dataset.choiceLabo);
const dataBacteries = JSON.parse(dataContainer.dataset.choiceBactery);

let choiceLab = {};
let choiceBactery = {};

dataLabs.forEach(function (lab) {
    choiceLab[lab.id] = lab.name;
});
dataBacteries.forEach(function (bactery) {
    choiceBactery[bactery.code] = bactery.shortname;
});

const readUploadedFile = (inputFile) => {
    const reader = new FileReader();

    return new Promise((resolve, reject) => {
        reader.onerror = () => {
            reader.abort();
            reject(new DOMException("Problem parsing input file."));
        };

        reader.onload = () => {
            resolve(reader.result);
        };
        reader.readAsBinaryString(inputFile);
    });
};

document.querySelector("#start-upload").addEventListener('click', () => {
    swal.mixin({
        input: 'text',
        confirmButtonText: 'Next →',
        showCancelButton: true,
        progressSteps: ['1', '2', '3']
    }).queue([
        {
            title: 'Laboratoire',
            text: 'Indiquez le laboratoire',
            input: 'select',
            inputOptions: choiceLab,
            inputPlaceholder: 'Selectionnez un laboratoire',
        },
        {
            title: 'Bactérie',
            text: 'Quelle est la bactérie concernée ?',
            input: 'select',
            inputOptions: choiceBactery,
            inputPlaceholder: 'Selectionnez une bactérie',
        },
        {
            title: 'Select image',
            input: 'file',
            inputAttributes: {
                'accept': 'image/*',
                'aria-label': 'Upload your profile picture'
            },
            showCancelButton: true,
            confirmButtonText: 'Upload',
            showLoaderOnConfirm: true,
            preConfirm: async (file) => {
                if (file) {
                    return await readUploadedFile(file)
                }
            },
            allowOutsideClick: () => !swal.isLoading()
        }
    ]).then((result) => {
        if (result.value) {
            swal({
                title: 'All done!',
                html: 'Your file was succesfully uploaded',
                confirmButtonText: 'Fermer'
            })
        }
    });
});

如果您发现有问题，请随时提供反馈。