上传图片 elementui上传图片改为‘ resBase64手动上传‘

最新推荐文章于 2023-09-05 09:36:03 发布

原创最新推荐文章于 2023-09-05 09:36:03 发布 · 231 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍如何在使用ElementUI组件时，将图片上传方式改为手动转换为Base64字符串进行上传，主要涉及前端JavaScript的处理流程。

<template>
    <div>
        <div class="box">
            <div class="amin">

                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="uploadImg">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            imageUrl: ''
        };
    },
    methods: {
        beforeAvatarUpload(file) {
            console.log(file)
            this.imgName = file.name;
            this.nowFile = file;
        },
        uploadImg(data) {
            this.imageUrl = URL.createObjectURL(data.file);
          
                this.getBase64(data.file).then(resBase64 => {
                    console.log(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>
<style scoped lang="less">
.box {

    width: 100%;
    height: 690px;

    // background-color: pink;
    .amin {
        width: 300px;
        height: 300px;
        margin: auto;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    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>

标签