input如何上传文件

1）绑定input[type=‘file’]的change事件

<input @change="uploadPhoto($event)" type="file" class="kyc-passin">

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）再利用ajax将获取到的图片或文件的编码传给后台即可。