javascript - 使用 UpdateHandler 在 Keystone.js 中上传 LocalFile

Question

如何才能做到这一点？ Here ，有人建议使用列表项的 UpdateHandler 或下划线方法，如 profileImage._.uploadImage(file, update, callback) 来处理文件上传，但他们使用 S3 文件 而不是 LocalFile。我首先尝试使用下划线方法，但它似乎不像上面的问题那样有效。其他站点上有很多零散的文档，但它们似乎都已过时(例如，有些人建议使用不再存在的 LocalFile 方法)并且包含许多损坏的链接。

查看js(中间件)代码:

view.on('post', { action: 'edit-profile' }, next => {       
    let updater = locals.user.getUpdateHandler(req, res, {
        errorMessage: 'There was an error editing your profile:'
    });

    updater.process(req.body, {
        flashErrors: true,
        logErrors: true,
        fields: 'profileImage, email, name, password'
    }, err => {
        if (err) {
            locals.validationErrors = err.errors;
            next();
        } else {
            req.flash('success', 'Profile updated');
            res.redirect('/profile');
        }
    });
});

Jade 代码:

mixin edit-profile()
form(method='post', enctype='multipart/form-data', autocomplete='off', novalidate).form-horizontal.create-form.profile-form
    input(type='hidden', name='action', value='edit-profile')

    .row: .col-sm-8.col-sm-offset-2

        h2 Edit Profile

        .form-group
            +user-picture(locals.user)
            label(for="profileImage") Change profile picture
            input(type='file', id='profileImage' name='profileImage')
        .form-group
            label(for="email") Email
            input(type='email', value=locals.user.email, size="40", id='email', name='email', placeholder='email').input.input-xl.input-faded
        .form-group
            label(for="email") Name
            input(type='text', value=locals.user.name.first, name='name.first', placeholder='First name').input.input-xl.input-faded
            input(type='text', value=locals.user.name.last, name='name.last', placeholder='Last name').input.input-xl.input-faded
        .form-group
            label(for="password") Change password
            input(type='password', id="password", name='password', placeholder='password').input.input-xl.input-faded
            input(type='password', name='password_confirm', placeholder='password').input.input-xl.input-faded
        .form-group
            button(type='submit', data-loading-text="Changing...").btn.btn-lg.btn-primary.btn-block Update profile

Answer 1

事实证明，问题在于 Keystone.js 在涉及 LocalFile 上传时对输入字段的命名非常挑剔。 Keystone 网站上任何地方都没有记录它(事实上，似乎没有关于 UpdateHandler 的任何内容)，但您需要在名称后加上 _upload。

因此，Jade 代码应如下所示(注意第一个 .form-group 中的区别):

mixin edit-profile()
form(method='post', enctype='multipart/form-data', autocomplete='off', novalidate).form-horizontal.create-form.profile-form
input(type='hidden', name='action', value='edit-profile')

.row: .col-sm-8.col-sm-offset-2

    h2 Edit Profile

    .form-group
        +user-picture(locals.user)
        label(for="profileImage_upload") Change profile picture
        input(type='file', id='profileImage_upload' name='profileImage_upload')
    .form-group
        label(for="email") Email
        input(type='email', value=locals.user.email, size="40", id='email', name='email', placeholder='email').input.input-xl.input-faded
    .form-group
        label(for="email") Name
        input(type='text', value=locals.user.name.first, name='name.first', placeholder='First name').input.input-xl.input-faded
        input(type='text', value=locals.user.name.last, name='name.last', placeholder='Last name').input.input-xl.input-faded
    .form-group
        label(for="password") Change password
        input(type='password', id="password", name='password', placeholder='password').input.input-xl.input-faded
        input(type='password', name='password_confirm', placeholder='password').input.input-xl.input-faded
    .form-group
        button(type='submit', data-loading-text="Changing...").btn.btn-lg.btn-primary.btn-block Update profile

如果您使用的是标准 HTML，那实际上并没有什么不同。只需将输入的 ID 和名称设置为 fieldnamehere_upload(在我的例子中，LocalFile 的字段名称是 profileImage)。更新程序代码是准确的(注意，updater.process 参数中的 fields 的顺序应该与您的输入字段的顺序相同形式)。

我不推荐使用列表中的下划线方法。这似乎比使用此处所示的 UpdateHandler 更难。