Загрузка файлов с помощью ActiveStorage в Vue.js - PullRequest
Новая
       7

Загрузка файлов с помощью ActiveStorage в Vue.js

0 голосов
/ 24 ноября 2018

Я хочу добавить загрузки файлов в модель карты (включая один и несколько файлов), используя новую функцию Rails 5.2 ActiveStorage.Я сильнее в Rails и использую Vue.js для этого - раньше я использовал Paperclip для этого.Однако я настроил файл config/storage.yml и необходимые миграции для ActiveStorage.Я также установил связь между картой и обновил CardController, чтобы разрешить files: [].

Компонент card.vue, который я создал в настоящее время, работает хорошо;Карта может иметь название и описание, а описание может быть обновлено.Эти записи сохраняются в базе данных.Моя проблема состоит в том, чтобы выяснить, как связать загрузку файлов на карту, и логику, необходимую для загрузки нескольких файлов при сохранении.

В настоящее время я использую <input name="files" type="file" data-direct-upload-url="/rails/active_storage/direct_uploads" direct_upload="true" /> для создания поля ввода на карте.Однако после выбора изображения PDF на моем локальном компьютере и нажатия кнопки «Сохранить» журналы показывают, что ничего не происходит [в отношении вставки новой строки в active_storage_attachments или создания большого двоичного объекта].Как расширить метод сохранения, чтобы принять файл?

card.rb 

class Card < ApplicationRecord
  has_many_attached :files
end

CardController 

class CardsController < ApplicationController
  private
    def card_params
      params.require(:card).permit(:list_id, :title, :position, :description, files: [])
    end
end

card.vue 

<template>
  <div>
    <div @click="editing=true" class="card card-body">
      <h4>
        {{card.title}}
      </h4>
    </div>

    <div v-if="editing" class="modal-backdrop show"></div>

    <div v-if="editing" @click="closeModal" class="modal show" style="display: block">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <div>
              <h4>
                {{card.title}}
              </h4>
            </div>
          </div>
          <div class="modal-body">
            <div>
              <h5>{{card.description}}</h5>
            </div>
            <textarea v-model="description" class="form-control"></textarea>
          </div>
          <div class="modal-footer">
            <input name="files" type="file" data-direct-upload-url="/rails/active_storage/direct_uploads" direct_upload="true" />
            <button @click="save" type="button" class="button button-secondary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ["card", "list"],

  data: function() {
    return {
      editing: false,
      title: this.card.title,
      description: this.card.description,
      files: []
    }
  },

  methods: {
    save: function() {
      var data = new FormData
      data.append("card[title]", this.title)
      data.append("card[description]", this.description)

      Rails.ajax({
        url: `/cards/${this.card.id}`,
        type: "PATCH",
        data: data,
        dataType: "json",
        success: (data) => {
          const list_index = window.store.lists.findIndex((item) => item.id == this.list.id)
          const card_index = window.store.lists[list_index].cards.findIndex((item) => item.id == this.card.id)
          window.store.lists[list_index].cards.splice(card_index, 1, data)

          this.editing = false
        }
      })
    }
  }
}
</script>

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Я склонен делать это так: 

let input_file = document.querySelectorAll('input[type="file"]')

// ...

formData.append('card[files]', input_file.files[0]) // or loop through if need be, also it might be card[files][0], I can't remember

Не уверен, нужно ли вам много файлов или только один.И это при условии, что вы не хотите отправлять его асинхронно, как кажется в вашем коде.

0 голосов
/ 24 ноября 2018

Попробуйте изменить свое имя для ввода в соответствии с разрешенными параметрами: 

<input name="card[files][]" type="file" ... />

Обновлено :

Как я уже ответил, вам нужно изменить свойпараметры соответствуют вашим разрешенным значениям.
Теперь, используя Vue, вы можете удалить name и добавить файлы в событие FormData при изменении, например: 

<template>
  <div>
    ...
    <div class="modal-footer">
      <input ref="files" type="file" @change="onFilesChange"
        data-direct-upload-url="/rails/active_storage/direct_uploads"
        direct_upload="true" multiple />
      <button @click="save" type="button" class="button button-secondary">Save changes</button>
    </div>
    ...   
  </div>
</template>

<script>

export default {
  props: ["card", "list"],

  data: function() {
    return {
      editing: false,
      title: this.card.title,
      description: this.card.description,
      form: new FormData
    }
  },

  methods: {
    onFilesChange: function() {
      let files = this.$refs.files.files
      for(let file of files) {
        this.form.append('card[files][]', file)
      }
    },
    save: function() {
      this.form.append("card[title]", this.title)
      this.form.append("card[description]", this.description)

      Rails.ajax({
        url: `/cards/${this.card.id}`,
        type: "PATCH",
        data: this.form,
        dataType: "json",
        success: (data) => {
          // ...
          this.editing = false
        }
      })
    }
  }
}
</script>

Примечание: не забудьтеmultiple свойство на входе, если вы хотите загрузить несколько файлов.

...