저는 accept prop이 "image / *"로 설정된 Vue 프로젝트에서 Bootstrap-Vue 구성 요소를 사용하고 있습니다. Browse-Button으로 잘 작동하지만 여전히 모든 종류의 파일을 파일 형식에 놓을 수 있으며 수락합니다. 이것은 버그입니까, 아니면 뭔가 빠졌습니까?
<b-form-file
accept="image/*"
v-model="file"
:state="null"
placeholder="Choose a file or drop it here..."
drop-placeholder="Drop file here..."
></b-form-file>
Bootstrap-Vue의 <b-form-file>구성 요소는 기본 <input type="file">요소 의 래퍼입니다 . 는 어디 input보이지 않는 대신 사용자 정의 레이블을 보여 주지만, 여전히 파일 처리에 대한 입력을 사용합니다.
즉, 기본 입력과 동일한 방식으로 작동하여 모든 항목을 입력 할 수 있습니다. 심지어 가진 경우 accept="image/*" applied. (적어도 Chrome에서는)
v-model변경 사항이 올바른 형식인지 확인하려면 수동으로 확인 해야합니다.
예를 들어 watcher잘못된 파일 인 경우 입력을 재설정하기 위해를 만들 수 있습니다.
watch: {
file(newFile) {
if(newFile && !newFile.type.startsWith("image/")) {
this.$nextTick(() => {
this.file = null;
})
}
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다