如何将图像预加载到nuxt dropzone中

Question

我正在使用nuxt dropzonehttps://www.npmjs.com/package/nuxt-dropzone上传图像。我还想把它用作图像库，这样用户就可以像上传图像一样查看图像。我没有找到很多关于nuxt dropzone的文档，所以我想知道如何将图像预加载到dropzone中。

这是我的代码：

<template>
<v-card style="border-radius: 0; box-shadow: none" class="px-10">
<v-row justify="center">
<div class="pt-8" style="width: 1050px">
<v-tabs
:centered="false"
:hide-slider="true"
:fixed-tabs="false"
class="hls-tabs py-1"
height="100%"
>
<v-tab
:ripple="false"
class="hls-tab background py-3 tabs-0"
active-class="primary tab-active"
>
<div class="background px-1 tab-container">
<p class="tab-content py-4 subheading">Upload Image</p>
</div>
</v-tab>
<v-tab
:ripple="false"
class="hls-tab background py-3 tabs-1"
active-class="primary tab-active"
>
<div class="background px-1 tab-container">
<p class="tab-content py-4 subheading">Image Library</p>
</div>
</v-tab>
<v-tab-item class="tab-item tab-item-0">
<div class="tab-item-content px-15 py-15" style="min-height: 400px">
<dropzone
id="imageUpload"
ref="imageUpload"
v-model="testImages"
:options="options"
:destroy-dropzone="true"
:style="
isUploaded
? 'border: 0; border-radius: 25px'
: 'border: 4px dashed rgb(111, 118, 167); border-radius: 25px'
"
@vdropzone-file-added="onFileAdded"
@vdropzone-removed-file="onFileRemove"
>
<v-icon size="60" color="rgb(176, 173, 173)" class="pb-5"
>mdi-file-upload-outline</v-icon
>
<h3 style="color: rgb(111, 118, 167)" class="pb-5">
To Upload Media, drag files here
</h3>
<h3 style="color: rgb(111, 118, 167)" class="pb-5">OR</h3>
<h3 style="color: rgb(111, 118, 167)">click to select file</h3>
</dropzone>
</div>
</v-tab-item>
<v-tab-item class="tab-item tab-item-0">
<div class="tab-item-content" style="min-height: 400px">
<dropzone
id="imageLibrary"
ref="imageLibrary"
:destroy-dropzone="true"
:options="libraryOptions"
>
<div
v-for="image in testImages"
:key="image.dataURL"
class="dropzone-previews dropzone"
>
<img :src="image.dataUrl" :height="200" :width="200" />
</div>
</dropzone>
</v-tabs>
</div>
</v-row>
</v-card>
</template>
<script>
import dropzone from 'nuxt-dropzone';
import 'nuxt-dropzone/dropzone.css';
import defaultImage from '~/assets/empty_photo.png';
import second from '~/assets/google_mic.png';
export default {
name: 'ImageUploadDialog',
components: { dropzone },
data() {
return {
images: [],
youtubeUrl: '',
isUploaded: false,
testImages: [defaultImage, second],
options: {
url: 'https://httpbin.org/post',
addRemoveLinks: true
},
libraryOptions: {
url: 'https://httpbin.org/post'
}
};
},
methods: {
handleClose() {
this.$nuxt.$emit('close-image-upload');
},
handleSave() {
for (const file of this.$refs.imageUpload.dropzone.files) {
this.images.push(file);
}
const lastIndex = this.youtubeUrl.lastIndexOf('/');
const youtubeIdentifier = this.youtubeUrl.slice(lastIndex + 1);
},
onFileAdded() {
this.isUploaded = true;
},
onFileRemove() {
if (this.$refs.imageUpload.dropzone.files.length === 0) {
this.isUploaded = false;
}
}
}
};
</script>

我试着用"；实例"；以在加载时发出，但我一直收到一个错误，即它无法读取dropzone的属性。

mounted() {
const instance = this.$refs.imageLibrary.dropzone;
for (const image of this.testImages) {
const mockFile = { name: image, size: 12345 };
instance.emit('addedFile', mockFile);
}
},

Answer 1

使用dropzone.js手动AddFile((函数，并使用nextTik正确渲染上传的图片

mounted(){
this.$nextTick(() => {
for(const image of this.testImages){
let url = `${imageLink}`;
let file = { size: 123, name: image, type: "image/png" };
this.$refs.myVueDropzone1.manuallyAddFile(file, url); 
}
});       
}

Answer 2

好吧，因为dropzone在抽屉里，页面一加载就加载。裁判只有在落区实际显示在屏幕上时才被认出。当我做一个"window.setTimeout"时，裁判起了作用。所以我解决这个问题的方法是把第二个下降区放在它自己的组件中。

第二个组件看起来是这样的：

<template>
<div class="tab-item-content" style="min-height: 400px">
<dropzone
id="imageLibrary"
ref="imageLibrary"
:destroy-dropzone="true"
:options="libraryOptions"
>
</dropzone>
</div>
</template>
<script>
import dropzone from 'nuxt-dropzone';
import 'nuxt-dropzone/dropzone.css';
import defaultImage from '~/assets/empty_photo.png';
import second from '~/assets/google_mic.png';
export default {
name: 'ImageLibrary',
components: { dropzone },
data() {
return {
testImages: [defaultImage, second],
libraryOptions: {
url: 'https://httpbin.org/post'
}
};
},
mounted() {
for (const image of this.testImages) {
console.log('image', image);
const url = `${image}`;
const file = { size: 123, name: `${image}`, type: 'image/png' };
this.$refs.imageLibrary.manuallyAddFile(file, url);
}
}
};
</script>