我有图像上传形式的图像到我的网站。当用户点击输入图像时，他可以选择多个图像。选择图像后，图像预览，用户可以选择图像的一些元信息(类别，类型)。
upload.vue
<template>
<div>
<div>
//Universal category select. this selection will apply to all comp.
<v-select placeholder="Select Category"
class="mt-2 md:w-1/2"
:options="category"
v-model="parentDesignCategory"
/>
<v-select
placeholder="Select Type"
class="mt-2 md:w-1/2"
:options="type"
v-model="parentDesignType"
/>
</div>
<input
type="file"
accept="image/*"
name="images"
@change="uploadImage"
id="images"
multiple
/>
<div class="flex flex-wrap">
<div class="md:w-1/2" v-for="(file, index) in files" :key="index">
<transition name="fade">
<AdminFileUpload
:file="file"
:type="type"
:category="category"
:parentDesignType="parentDesignType"
:parentDesignCategory="parentDesignCategory"
@delete-row="deleteThisRow(index)"
/>
</transition>
</div>
</div>
</div>
</template>
<script>
export default {
name: "admin",
// middleware: "auth",
data: function() {
return {
files: [],
parentDesignType: null,
parentDesignCategory: null,
type: ["1", "2", "3"],
category: ["a","b","c"
]
};
},
components: {},
methods: {
uploadImage(event) {
let file = event.target.files;
for (let i = 0; i < file.length; i++) {
this.files.push(file[i]);
}
},
deleteThisRow: function(index) {
this.files.splice(index, 1);
}
}
};
</script>
<style scoped>
.fade-enter-active {
transition: opacity 1.5s;
}
.fade-leave-active {
opacity: 0;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
如果所有图片都属于一个类别，那么用户可以从该页选择一个类别，所有组件都遵循该类别。
很常见。vue组件
<template>
<div>
<div class="m-4">
<form
@submit.prevent="uploadImage"
class="flex flex-wrap w-full shadow-lg border border-black"
action="/upload"
>
<div class="w-full md:w-1/2 p-2">
<div class="relative pb-1/1">
<img :src="imageSrc" class="w-full absolute h-full" />
</div>
</div>
<div class="flex flex-col w-full md:w-1/2 p-2">
<v-select
placeholder="Select Category"
class="mt-2"
:options="category"
v-model="designCategory"
></v-select>
<v-select
placeholder="Select Type"
class="mt-2"
:options="type"
v-model="designType"
></v-select>
<input
placeholder="likes"
class="w-full text-black border-2 mt-2 p-3 rounded-lg focus:outline-none focus:shadow-outline"
type="number"
v-model="designLikes"
/>
<button
@click="removeSelf"
class="uppercase h-12 text-lg font-bold tracking-wide bg-primary text-gray-100 mt-2 p-3 rounded-lg w-full cursor-pointer"
type="button"
>
Cancel
</button>
<button
type="submit"
class="uppercase mt-2 h-16 text-xl font-bold tracking-wide bg-accent text-gray-100 p-3 rounded-lg w-full transition duration-300 hover:opacity-80 cursor-pointer"
>
Upload
</button>
</div>
</form>
</div>
</div>
</template>
<script>
import "vue-select/dist/vue-select.css";
export default {
name: "fileUpload",
middleware: "auth",
props: [
"file",
"type",
"category",
"parentDesignCategory",
"parentDesignType"
],
data() {
return {
designCategory: this.parentDesignCategory,
designType: this.parentDesignType,
designLikes: null
};
},
computed: {
imageSrc: function() {
return URL.createObjectURL(this.file);
}
},
created() {},
methods: {
async uploadImage() {
let formData = new FormData();
const config = {
headers: {
"content-type": "multipart/form-data"
}
};
formData.append("likes", this.designLikes);
formData.append("image", this.file);
formData.append("category", this.designCategory);
formData.append("type", this.designType);
await this.$axios
.post("upload", formData, config)
.then(response => {
this.progress = 0;
this.showToast("Photo Uploaded.", "success");
// Delete coomponent when upload complete
this.$emit("delete-row");
})
.catch(error => {
});
},
removeSelf: function() {
this.$emit("delete-row");
});
}
}
};
</script>
现在我的第一个主要问题是当用户从dom中删除组件时，它删除了组件，但Selected类别/类型保持在相同的位置。假设我选了4张图片。我将第二个图像类别设置为";a;"。当我删除第一个图像。第一张图片被删除，第二张图片排在第一位，但是类别被选中了。保持在位置2
现在第二个问题是，如果我在选择图像之前为父页面中的通用组件选择了类别，它将适用于所有组件。但在选择图像后，通用选择不起作用。
第三个问题是转换在任何组件上都不起作用
简单的答案是-您必须设置一个unique ID。下面是解决这个问题的方法:
模板中的更改:首先，您需要设置id而不是使用index-设置id使其唯一，这就是我们需要的。因此，将:key设置为file.id(我们将在脚本中创建它)，并将file和deleteThisRow传递给您的方法。完成了!
<div class="md:w-1/2" v-for="file in files" :key="file.id">
//and change your index here to file here we will reference on the unique file we will create with the unique id we will set
@delete-row="deleteThisRow(file)"
脚本中的更改:将id = null设置为data()-您创建的id将不会是未定义的。之后，去你的methods和设置你的id = i-现在它是唯一的，不能再像你的index可以改变。最后一件事你应该做的是map超过你的files array，并得到正确的index，应该与indexOf一起删除。
//in your data
data() {
return {
id: null,
}
},
//in your methods
methods: {
uploadImage(event) {
let file = event.target.files;
for (let i = 0; i < file.length; i++) {
this.files.push({image:file[i], id : i}); //here you set your id to an unique number! (could be this.id you have to try)
}
},
deleteThisRow: function(file) {
var indexDelete = this.files.map(x => {
return x.id;
}).indexOf(file.id);
this.files.splice(indexDelete, 1);
}
}
毕竟，您必须通过以下代码将file.id传递给您的孩子:
<child :uniqueID="file.id"
:file="file.image">
和reference在你的孩子中使用props
希望我理解你的问题正确-比这应该解决你的问题-请让我知道这是否适用于你!
附加信息:请将所有index-值更改为file.id-，否则一切都是真正的unique。