Загрузка фото drag&drop

203

14 декабря 2018, 15:00

Всем привет,у меня есть вот такая загрузка фото на сайт(при клике на картинку пользователь загружает фотку на сайт,и в рамках этой картинки она отображается Как сделать можно реализовать 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>

Answer 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>