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 = ''

    }

巴特西

input如何上传文件

3）再利用ajax将获取到的图片或文件的编码传给后台即可。

最新文章

热门文章