vue+element-ui实现base64编码上传图片

<template>
    <el-upload
                                class="avatar-uploader"
                                :http-request="httpRequest"
                                :action="actionUrl"
                                name='bankimg'
                                :show-file-list="false">
                                <img v-if="ruleForm.bankimg" :src="ruleForm.bankimg" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
</template>
<script>
export default {  
       data() {
            return {
              actionUrl:'',
                ruleForm:{
                      bankimg:'',
                }
        }
    methods: {
      httpRequest (options) {
            let file = options.file
            let filename = options.filename
            if (file) {
                this.fileReader.readAsDataURL(file)
            }          
            this.fileReader.onload = () => {
                let base64Str = this.fileReader.result.split(',')[1]
                this.$axios.post("/payways/upload",{file:base64Str})
                .then(res => {
                    if(filename=='bankimg'){
                        this.ruleForm.bankimg= res.data.biz_response.data
                    }
                    console.log(res)                  
                })
                .catch(err => {
                 console.log(err)
                })
              
            }
        },
    }
}
</script>

el_upload组件自定义上传转为base64编码的图片

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。