Как я могу загрузить изображение по ссылке на компонент vue?

Мой компонент выглядит следующим образом:

<template>
    <div>
        <ul class="list-inline list-photo">
            <li v-for="item in items">
                <div class="thumbnail" v-if="clicked[item]">
                    <img src="https://myshop.co.id/img/no-image.jpg" alt="">
                    <a href="javascript:;" class="thumbnail-check"><span class="fa fa-check-circle"></span></a>
                </div>
                <a v-else href="javascript:;" class="thumbnail thumbnail-upload"
                   title="Add Image" @click="addPhoto(item)">
                    <span class="fa fa-plus fa-2x"></span>
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        props: ['state', 'product'],
        data() {
                return {
                    items: [1, 2, 3, 4, 5],
                    clicked: [] // using an array because your items are numeric
                }
            }
        },
        methods: {
            addPhoto(item) {
                this.$set(this.clicked, item, true)
            }
        }
    }
</script>

Если я нажму на ссылку, она вызовет метод addPhoto

Я хочу, чтобы если щелкнуть ссылку, она загрузит изображение. Таким образом, он выберет изображение, затем загрузит его и обновит img с загруженным изображением.

Похоже, что код для загрузки изображения будет помещен в метод добавления фото.

Я все еще не могу загрузить изображение в компонент vue

Как я могу это решить?


vue.js vuex vuejs2 vue-component image-uploading
person Success Man    schedule 12.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать компонент для выбора файлов следующим образом:

<template>
  <input v-show="showNative" type="file" :name="name" @change="onFileChanged" :multiple="multiple" :accept="accept"/>
</template>

<script>

export default {
  props: {
    name: { type: String, required: true },
    show: { type: Boolean, Default: false },
    multiple: { type: Boolean, default: false },
    accept: { type: String, default: "" },
    showNative: { type: Boolean, default: false }
  },
  watch: {
    show(value) {
      if (value) {
        // Resets the file to let <onChange> event to work.
        this.$el.value = "";

        // Opens select file system dialog.
        this.$el.click();

        // Resets the show property (sync technique), in order to let the user to reopen the dialog.
        this.$emit('update:show', false);
      }
    }
  },
  methods: {
    onFileChanged(event) {
      var files = event.target.files || event.dataTransfer.files;
      if (!files.length) {
        return;
      }

      var formData = new FormData();

      // Maps the provided name to files.
      formData.append(this.name, this.multiple ? files : files[0]);

      // Returns formData (which can be sent to the backend) and optional, the selected files (parent component may need some information about files).
      this.$emit("files", formData, files);
    }
  }
}
</script>

И вот некоторая информация, как его использовать:

  • импортировать компонент -> объявить директиву.
  • укажите -> используется для создания formData (это имя, которое будет бэкэнд).
  • чтобы отобразить его, используйте свойство Примечание: рекомендуется синхронизировать, если необходимо открывать несколько раз на одной странице. Проверьте нижние примеры. ( /!\ Vue 2.3 требуется для синхронизации /!\ )
  • прослушайте событие @files, чтобы получить массив выбранных файлов в качестве параметра
  • если вы хотите использовать его как выбор нескольких файлов, укажите для свойства значение true.
  • используйте реквизит для фильтрации файлов (допустимые типы принятия: HTML Input=file Accept Тип файла атрибутов (CSV)).
  • когда установлено значение true, компонент отображает кнопку «выбрать файл» (файл типа ввода), в противном случае он скрыт, а окна отображаются с помощью Js.

пример: одиночный выбор

<file-upload name="fooImport" @files="selectedFile" :show.sync="true" />

пример: множественный выбор

<file-upload name="barUpload" @files="selectedFiles" :show.sync="displayUpload" accept="text/plain, .pdf" />
person V. Sambor    schedule 12.07.2017