Vue2-Dropzone: Как использовать removeFile (файл)? - PullRequest
Новая
       68

Vue2-Dropzone: Как использовать removeFile (файл)?

0 голосов
/ 28 марта 2020

Я создал пользовательскую Dropzone с vue2Dropzone: 

<drop-zone :options="MydropzoneOptions" :include-styling="false" @vdropzone-success="UploadSuccess" @removeUpload="removeFile" id="MyDropzoneID" ref="MyDropzone" :useCustomSlot=true>
        <div class="dropzone-custom-content">
            <h3>Upload Here</h3>
        </div>
</drop-zone>

Загруженные файлы затем отображаются в отдельном div с id = "uploaded": 

    <div id="uploaded" class="dropzone-previews">
        <h3>Uploaded Files:</h3>
        <template v-for="(UploadFile,index) in MyUploads">
            <img :src="UploadFile.Dateiname"><a title="Delete this file" @click="$emit('removeUpload')">Delete</a>
        </template>
    </div>

В ' uploaded 'div, рядом с каждым загруженным изображением (миниатюрой) есть ссылка для удаления каждого файла. Но я не знаю, как реализовать эту функцию. Документация гласит: есть метод с именем removeFile (файл): .removeFile(file) -->Removes a file from the dropzone area.

Я создал метод с именем removeThisFile, запустил @ click = "removeThisFile": 

    removeThisFile: function(){
        this.$refs.MyDropzone.removeFile()
        console.log("File removed!")
    }

Но в результате консоль сказала «this. $ Refs.Mydropzone не определена, что имеет смысл сейчас, поскольку только объект DOM может передать необходимую информацию о файле. Поэтому я решил попробовать версию, которую вы видите в начале: 

<div><a[..] @click="$emit('removeUpload')></a></div>

и в DOM-объекте drop-zone есть слушатель этого, запускающий мой метод "removeThisFile". 

   <drop-zone [..] @removeUpload="removeThisFile" [..]></drop-zone>

Но это также не работает, я не знаю почему, поскольку я не получаю сообщение об ошибке в консоли, но этот метод также не запущен, поскольку в консоли также нет «Файл удален!».

Почему это не работает, это вообще так? правильный способ сделать это?

Ответы [ 2 ]

0 голосов
/ 23 апреля 2020

Я не уверен, хотите ли вы просто удалить файл с помощью собственной функции, но вы можете установить в options ключе addRemoveLinks значение true, как указано в документации of dropzone

В вашем случае у вас будет что-то вроде: 

MydropzoneOptions: {
  url: "...",
  addRemoveLinks: true
}

И ваши файлы будут иметь удалить файл ссылку на миниатюру

0 голосов
/ 28 марта 2020

Вам нужно передать removeFile файл, который вы хотите удалить.

Таким образом, вы можете установить свой обработчик кликов на @click="removeThisFile(UploadFile)", и тогда removeThisFile должно стать: 

    removeThisFile: function(thisFile){
        this.$refs.MyDropzone.removeFile(thisFile)
        console.log("File removed!")
    }
...