elementui 自动上传el-upload转化base64模式_el-upload 获取base64-CSDN博客

本文链接：https://blog.csdn.net/u013141712/article/details/131417340

该代码示例展示了如何在Vue.js应用中使用el-upload组件进行图片上传。当文件被选择后，它首先将文件转换为base64编码，然后通过自定义的http-request方法发送到指定的API接口进行存储。组件还包括样式设计，提供了一个带有上传提示图标的avatar-uploader。

摘要由CSDN通过智能技术生成

<template>
    <div>
        <el-upload 
        class="avatar-uploader"
        action="#" 
        :show-file-list="false" 
        :http-request="abc">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #dd1313;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<script>
export default {
    data() {
        return {
            show: false,
            imageUrl:''
        }
    },
    methods: {
        abc(data) {
            this.imageUrl = URL.createObjectURL(data.file);
            this.getBase64(data.file).then(resBase64 => {
                this.$apiPost('https://www.zzgoodqc.cn/index.php/index/upload/uploadimg', { imgurl: resBase64 }).then(res => {
                    console.log(res);
                })
            })
            
        },
        //这个file参数 也就是文件信息，你使用 插件 时 你就可以打印出文件信息 看看嘛
        getBase64(file) {
            return new Promise((resolve, reject) => {
                let reader = new FileReader();
                let fileResult = "";
                reader.readAsDataURL(file);
                //开始转
                reader.onload = function () {
                    fileResult = reader.result;
                };
                //转 失败
                reader.onerror = function (error) {
                    reject(error);
                };
                //转 结束  咱就 resolve 出去
                reader.onloadend = function () {
                    resolve(fileResult);
                };
            });
        },

    }
}
</script>