0

Всем привет,у меня есть вот такая загрузка фото на сайт(при клике на картинку пользователь загружает фотку на сайт,и в рамках этой картинки она отображается Как сделать можно реализовать drag&drop механизм,чтобы пользователь перетаскивал картинку и оно также отображалась

<v-card class="elevation-4 mb-3">
      <h2>Общий вид</h2>
        <div class="item-container">
          <div v-for="(item, index) in photo" :key="index" class="item">
            <div class="img-container">
              <img :src="item.url" alt="" v-if="item.url" @click="photoPopUp(item)" />
              <img src="../assets/03.expert.inspection.photo.png" alt="" v-else/>
              <v-btn class="btn-out" v-if="item.url" icon color="grey" small @click="remove(item)">
                <v-icon color="black">clear</v-icon>
              </v-btn>
              <label class="loadfile" :class="{hide: item.url}">
                <input class="inputfile" type="file" @change="photoFileSelected(index,'vin')">
              </label>
            </div>
           <h3>{{item.title}}</h3>
          </div>
        </div>
      <v-btn class="btn-save" color="red" @click="onUpload">Загрузить</v-btn>
      <v-btn  :to="'/damages'" class="btn-next" color="red">Продолжить</v-btn>
    </v-card>
<script>
import ClickOutside from "vue-click-outside";

export default {
  data() {
    return {
      photo: [
        {leftFront: "",title:'Спереди слева', url: ""},
        {leftBack: "",title:'Сзади слева', url: ""},
        {rightFront: "",title:'Спереди справа', url: ""},
        {rightBack: "",title:'Сзади справа', url: ""},
        {around: "",title:'Круговое', url: ""},
        {vin: "",title:'Фото VIN кода', url: ""},
        {odo: "",title:'Фото показаний одометра при включенном зажигании (при наличии ключей от ТС) ', url: ""},
        {rear: "",title:'Фото задней части салона', url: ""},
        {front: "",title:'Фото передней части салона', url: ""},
        {tires: "",title:'Фото шин и дисков', url: ""},
        {inside: "",title:'Фото подкапотного пространства', url: ""}
      ],
      showPop: null
    };
  },
  methods: {
    photoFileSelected(i, str) {
      this.photo[i][str] = event.target.files[0];
      event.target.value = '';
      this.photo[i].url = URL.createObjectURL(this.photo[i][str]);
    },
    photoPopUp(item) {
      this.showPop = item;
    },
    outPhotoClick() {
      this.showPop = null;
    },
    remove(item) {
      item.url = null;
    },
    onUpload() {
      const data = {
        one: this.photoFileSelected.name,
        two: this.photoFileSelected
      };

      this.$store.dispatch('loadFile',data);
    },
  },
  directives: {
    ClickOutside
  },
};
</script>

1 ответ 1

1

Есть событие ondrop, в нем можно получить файлы через e.dataTransfer.files.

Рабочий пример:

new Vue({
  el: '#app',
  data: () => ({
    images: []
  }),
  mounted () {
    const holder = document.querySelector('.holder')
    const input = document.querySelector('#input-file')

    input.onchange = (e) => {
      holder.classList.remove('holder--dragover')
      this.addImages(e.target.files)
    }

    holder.ondragover = () => {
      holder.classList.add('holder--dragover') // добавляет класс dragover
      
      return false
    }
    holder.ondragleave = holder.ondragend = () => {
      holder.classList.remove('holder--dragover') // удаляет класс dragover
      
      return false
    }
    // когда файл был кинут
    holder.ondrop = e => {
      e.preventDefault()
      holder.classList.remove('holder--dragover')

      const files = e.dataTransfer.files
      const firstFileUrl = URL.createObjectURL(files[0])

      this.addImages(files)
    }
  },
  methods: {
    addImages (files) {
      const el = document.querySelector('.preview')

      for (file of files) {
        this.images.push({
          src: URL.createObjectURL(file),
          size: file.size,
          name: file.name
        })
      }
    }
  }
})
#input-file {
  display: none;
}

.holder {
  height: 100px;
  background-color: #c8dadf;
  height: 400px;
  outline: 2px dashed #92b0b3;
  outline-offset: -10px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.holder:hover, .holder--dragover {
  background-color: #a5b7bc !important;
  outline: 2px dashed #648083;
  color: #444444;
  cursor: pointer;
  transition: all .15s ease-in-out;
}

.holder:hover .holder__icon, .holder--dragover .holder__icon {
  fill: #5f777a !important;
}

.holder__icon {
  width: 100%;
  height: 80px;
  fill: #92b0b3;
  display: block;
  margin-bottom: 40px;
  transition: all .15s ease-in-out;
}

.image {
  max-width: 100px;
  max-height: 100px;
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input
    id="input-file"
    type="file"
    accept="image/*"
    multiple
  >
  <label
    class="holder"
    for="input-file"
  >
    <div>
      <svg
        class="holder__icon"
        xmlns="http://www.w3.org/2000/svg"
        width="50"
        height="43"
        viewBox="0 0 50 43"
      >
        <path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z"/>
      </svg>
      <br><br>
      <h3>Выберите файл или перенисите его сюда</h3>
    </div>
  </label>

  <div>
    <div v-for="image in images" :key="image.name" style="overflow-y: auto;">
      <img :src="image.src" class="image">
      <div>
        name: {{ image.name }} <br>
        size: {{ image.size }}
      </div>
    </div>
  </div>
</div>

9
  • А можно ли показать на примере vue?) Или моем примере)
    – user294431
    8 сен 2018 в 16:33
  • То там же почти так же, весь код кроме функции addImages ставите в mounted, addImages добавляете в methods, там где цикл for (file of files) { вместо new Image добавляете картинки в data, ничего сложного. Это Вам как задание чтобы лучше понять vue, я и так много Вам написал) 8 сен 2018 в 20:56
  • Можете на vue все равно показать? пробую сделать и не получается(
    – user294431
    10 сен 2018 в 4:37
  • Переделал все по красоте. 10 сен 2018 в 4:55
  • А у вас он перетаскивает фотку? У меня нет(
    – user294431
    10 сен 2018 в 5:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.