Vue/Vuex/Nuxt form에서 input type = 'file'을 지정하면 v-model을 사용할 수 없습니다.
계기
Nuxt.js와 Rails API를 사용하여 앱을 만들고 있습니다.
이미지 업로드 기능을 form으로 작성 중, v-model에서 걸려 버렸기 때문에
그 대처법을 실고 싶습니다.
문제
양식으로 이미지를 업로드하는 경우 HTML 태그 입력을 사용하면
type으로서는
file
를 선택하게 된다고 생각합니다.그리고 거기서 취득한 데이터를 data() 내의 Object에 저장하려고 하고,
v-model을 지정했습니다.
<!-- ... は省略を示す -->
<template>
...
<input type="file" v-model="submittedArticle.image" style="display: none;" />
...
</template>
<script>
...
data() {
return {
submittedArticle: {
title: "",
description: "",
image: null
},
...
}
}
...
</script>
그러면 VSCode에서 notice가
'v-model' directives don't support 'file' input type.
v-model은 type="file"을 지원하지 않는다는 것입니다.
대처법
@change
를 사용하여 해결했습니다.이미지를 업로드하면 이 type="file"의 input에 변화가 생기므로, 그것을 놓치지 않도록 input에
@change
를 붙여 감시합니다.그리고
@change
에 이미지 데이터를 취득하는 메소드(아래에서는 onImageUploaded
)를 연결하는 것으로, 이미지 업로드시에 화상 데이터를 취득할 수 있도록 합니다.그리고는 화상 데이터를 작성·저장하는 메소드도 만들어, 그것을 화상 취득 후에 호출합니다. 거기서 만든 Object를 data()에 저장합니다.
<!-- ... は省略を示す -->
<template>
...
<input type="file" @change="onImageUploaded" style="display: none;" />
...
</template>
<script>
...
data() {
return {
submittedArticle: {
title: "",
description: "",
image: null
},
...
}
},
methods: {
onImageUploaded(e) {
// event(=e)から画像データを取得する
const image = e.target.files[0]
this.createImage(image)
},
createImage(image) {
const reader = new FileReader()
// imageをreaderにDataURLとしてattachする
reader.readAsDataURL(image)
// readAdDataURLが完了したあと実行される処理
reader.onload = () => {
this.submittedArticle.image = reader.result
}
},
...
}
...
</script>
Reference
이 문제에 관하여(Vue/Vuex/Nuxt form에서 input type = 'file'을 지정하면 v-model을 사용할 수 없습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/after666/items/0b9503e8f3026cb1d686텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)