美文网首页
vue+element-ui实现base64编码上传图片

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

作者: 表里不一的汪星人 | 来源:发表于2018-08-07 11:45 被阅读0次
<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编码的图片

相关文章

网友评论

      本文标题:vue+element-ui实现base64编码上传图片

      本文链接:https://www.haomeiwen.com/subject/esmovftx.html