#javascript #arrays #object #file-upload #vuejs3
#javascript #массивы #объект #загрузка файла #vuejs3
Вопрос:
Я хочу отправить только одно из полей, содержащихся в объекте данных var arrImg. Первое, что я хочу вставить, это поле изображения переменной arrImg с условием, при котором проверяется значение true, в новое изображение массива в crudData:{‘image’:[]} . Затем, во-вторых, я хочу вставить имя поля var arrImg с условием, при котором проверяется значение true, в новое имя массива в crudData:{‘name’:[]} . Для проверяемого значения сначала устанавливается значение false, но при нажатии флажка ввода оно изменится на true. Кто-нибудь понимает, о чем я спрашиваю? я новичок в javascript. Спасибо.
Вот myfiddle https://jsfiddle.net/Annisa_Lianda30/d0ber5Lu/24 /
Это мой код:
<script>
export default {
data() {
return{
crudData:{
'id': null,
'name': [],
'image': [],
'arrImage': [],
},
}
},
imageUpload(e, maxItem){
let input = this.$refs.uploadImage
let file = input.files
if(file.length > (maxItem - this.crudData.arrImage.length)){
$('#uploadMultiFile').val('')
alert('You can only upload max ' maxItem ' items')
} else {
for(let i = 0; i < file.length; i ){
var valueArr = this.crudData.arrImage.map(function(item){ return item.fileName })
var isDuplicate = valueArr.some(function(item, idx){
return item == file[i].name
})
if (isDuplicate) {
alert("You've already uploaded this file")
continue
}else{
var arrImg = {
blob: URL.createObjectURL(file[i]),
image: file[i],
fileName: file[i].name,
checked: false,
name : null
}
this.crudData.arrImage.push(arrImg)
console.log(this.crudData.arrImage)
}
}
}
},
uploadImage(e){
this.$refs.uploadImage.click()
},
removeImage(key){
this.crudData.arrImage.splice(key, 1)
},
}
Это результат, который я получил от crudData.arrImage:
Вывод Javascript
Ответ №1:
Добро пожаловать в SO. Надеюсь, этот фрагмент кода поможет вам найти то, что вы ищете.
let checkedImages = this.crudData.arrImage.filter(img => img.checked)
let imageFiles = checkedImages.map(img => img.image)
let names = checkedImages.map(img => img.fileName)
console.log({ imageFiles,names })
Комментарии:
1. Здравствуйте, можете ли вы дать мне более конкретную подсказку? потому что, когда я добавляю это, я просто получаю Array(0)length: 0[[Prototype]]: Array(0), когда я смотрю на журнал консоли.
2. В нижней части вашей функции imageUploaded(e, maxItem){…} поместите этот код, а затем запустите console.log({ imageFiles,names }).
3. можете ли вы проверить мой код в этой скрипке jsfiddle.net/Annisa_Lianda30/d0ber5Lu/3 ?
4. К счастью. Посмотрим на это сейчас.
5. Я имею в виду, что я хочу отправить 2 данные из объекта arrImg. Сначала поле изображения и проверяется с условием true (где условие истинно после нажатия флажка), которое находится в arrImg var, которое должно быть отправлено в crudData{‘image’:[]} . затем, во-вторых, имя поля и проверяется с условием true (где условие истинно после нажатия флажка) который находится в переменной arrImg, который будет передан в crudData:{‘name’:[]}