Javascript 撇号Js-上传文件（撇号提交小部件）

我想上传一个文件/图像，我正在使用和。我能够绑定所有字段，即标题、开始日期、结束日期，但无法绑定图像字段。当我上传文件时，它仍然显示“未选择文件”，提交表单时，我收到错误，因为文件是必需的，但未选择。 这是我的密码：

app.js

'apostrophe-events': {
    // Let's add an attachment field so the user can upload an image
    addFields: [
      {
        name: 'image',
        type: 'attachment',
        group: 'images',
        required: true
      }
    ]
  },
  'apostrophe-events-submit-widgets': {
    extend: 'apostrophe-pieces-submit-widgets',
    fields: [ 'title', 'image', 'startDate', 'endDate' ]
  }

widget.html

{% import "apostrophe-schemas:macros.html" as schemas %}
<form class="apos-submit-pieces-form apos-ui" data-apos-pieces-submit-form>
  <h4>{{ data.label }}</h4>
  <!-- {{ schemas.fields(data.schema, { tabs: false }) }} -->
  <div class="form-group" data-name="{{data.schema[0].name}}">
    <input name="{{data.schema[0].name}}" type="text" class="form-control" id="exampleInputEmail1" placeholder="title"
      required>
  </div>
  <div class="form-group" data-name="{{data.schema[1].name}}">
    <input name="{{data.schema[1].name}}" type="file" class="form-control" id="exampleInputEmail2" required >
  </div>

  <div class="form-group" data-name="{{data.schema[2].name}}">
    <input name="{{data.schema[2].name}}" type="date" class="form-control" id="exampleInputEmail3" placeholder="startDate"
      required>
  </div>
  <div class="form-group" data-name="{{data.schema[3].name}}">
    <input name="{{data.schema[3].name}}" type="date" class="form-control" id="exampleInputEmail4" placeholder="endDate"
      required>
  </div>
  <button>Submit Now</button>
  {# Later gets hoisted out and becomes visible #}
  <div class="apos-pieces-submit-thank-you" data-apos-pieces-submit-thank-you>
    <h4>Thank you for your submission! We will review it soon.</h4>
  </div>
</form>

{%import“撇号模式：macros.html”作为模式%}
{{data.label}
立即提交
{#稍后被吊出并变得可见#}
感谢您的提交！我们将很快进行审查。

data.schema[1]。名称指的是图像字段。 请注意，我希望使用自定义视图，而不是小部件本身提供的视图。

---

谢谢。

我通过重用撇号附件宏解决了这个问题

{% import "apostrophe-schemas:macros.html" as schemas %}
{%- import "apostrophe-ui:components/buttons.html" as buttons -%}

{% macro attachment(field) %}
  <div class="apos-attachment-existing" style="display:none;" data-existing>
    <div class="apos-attachment-preview"><img data-preview src="" alt=""></div>
    <span class="apos-attachment-name" data-name></span>
    <div class="apos-button-group">
      <a class="apos-button apos-button--action" href="#" data-link target="_blank">{{ __("View file") }}</a>
      {% if field.crop %}
        <a class="apos-button apos-button--action" href="#" data-apos-crop-attachment>{{ __("Crop image") }}</a>
      {% endif %}
      {% if field.focalPoint %}
        <a class="apos-button apos-button--action" href="#" data-apos-focal-point-attachment>{{ __("Focal point") }}</a>
      {% endif %}
      {% if field.trash %}
        {{ buttons.danger('Delete File', { action: 'trash' }) }}
      {% endif %}
    </div>
  </div>
  <input type="file" name="{{ field.name }}" style="display:none;" data-uploader />
  {% if not field.readOnly %}{{ buttons.action('Upload File', { action: 'uploader-target' }) }}{% endif %}
{% endmacro %}

---

其中data.schema[1]指的是我的图像字段。

是的，如果您要跳过我们的标准模式宏，那么这是正确的选择。

{{ schemas.fieldset(data.schema[1], attachment) }}