input에서 파일을 업로드하는 방법

1342 단어
1) input[type='file']에 바인딩된change 이벤트
2) fileReader 객체를 사용하여 이미지 또는 파일의 base64 인코딩
checkImg (size, type) {
        let checkSuccess = true
        //  
        const supportTypeList = ['image/png', 'image/jpg', 'image/jpeg']
        //  5M
        const limitSize = 1024 * 1024 * 5 // 5M
        if (!supportTypeList.includes(type)) {
            this.changeErrorLayerShow(true)
            this.dialogInfo = dialogDescList.formatError
            checkSuccess = false
        }
        if (size > limitSize) {
            this.changeErrorLayerShow(true)
            this.dialogInfo = dialogDescList.sizeTooBig
            checkSuccess = false
        }
        return checkSuccess
    },
    uploadPhoto (e, id) {
        const uploadImgFiles = e.target.files
        const curImgFile = uploadImgFiles[0]
        const checkSuccess = this.checkImg(curImgFile.size, curImgFile.type)
        if (checkSuccess) {
            let reader = new FileReader()
            reader.readAsDataURL(curImgFile)
            reader.onload = (e) => {
                this.uploadCard[id] = e.target.result // base64
            }
        }
        //  , change 
        e.target.value = ''
    }

3) aax를 이용하여 얻은 그림이나 파일의 인코딩을 백엔드에 전송하면 된다.

좋은 웹페이지 즐겨찾기