身份证上传之后变成身份证的照片，用vue怎么做呢？

身份证上传之后变成身份证的照片，用vue怎么做呢？ 图片上传之后上传的图片作为照片！

上传 预览 吧 只有点击提交 才会执行上传 。element-upload 有类似的
https://element.eleme.cn/#/zh-CN/component/upload#wen-jian-suo-lue-tu

上传后，会产生一个文件地址保存到数据库。把这个地址返回前端替代2个图片的src

图片上传之后生成base64或者图片链接，将身份证那里的<img src="" alt="">图片标签的src换成上传图片产生的图片链接就好了

直接读取转换为base64先加载到img标签中

身份证上传之后让后端把身份证图片返回前端来

<template>
    <div class="step-container">
        <div class="step-wrap">
            <div class="step">
                <div class="step-icon bgcolor"></div>
                <div class="step-name font-color">必填信息</div>
            </div>

            <div class="line"></div>

            <div class="step">
                <div class="step-icon">2</div>
                <div class="step-name">补充信息</div>
            </div>

            <div class="line"></div>

            <div class="step">
                <div class="step-icon">3</div>
                <div class="step-name">完成</div>
            </div>
        </div>

        <div class="step-1"></div>
        <div class="form">
            <ul>
                <li>
                    <span class="asterisk">*</span><span class="right">姓名：</span><input type="text"
                        placeholder="请输入姓名" />
                </li>
                <li>
                    <span class="asterisk">*</span><span class="right">电话：</span><input type="number"
                        placeholder="请输入电话" />
                </li>
                <li>
                    <span class="asterisk">*</span><span class="right">验证码：</span><input type="text"
                        placeholder="请输入验证码" /><button>
                        获取验证码
                    </button>
                </li>
                <li>
                    <span class="asterisk">*</span><span class="right">身份证：</span><input type="text"
                        placeholder="请输入身份证号" />
                </li>
                <li class="id-card">
                    <div class="back">上传身份证</div>
                    <div class="flex">
                        <div class="front" v-on:click="chooseFront">
                            <img v-if="!imgSrc" src="../assets/img/id-card-1.jpg" />
                            <img v-else :src="imgSrc" />
                            <input ref="id_front" type="file" hidden class="file" @change="uploadImage($event)" />
                        </div>
                        <div class="front " v-on:click="chooseFrontBack">
                            <img v-if="!imgSrcBack" src="../assets/img/id-card-2.jpg" />
                            <img v-else :src="imgSrcBack" />
                            <input ref="id_frontBack" type="file" hidden class="file" @change="uploadImageBack($event)" />
                        </div>
                    </div>

                </li>

                <li>
                    <span class="asterisk">*</span><span class="right">住址：</span><input type="text"
                        placeholder="请输入地址" />
                </li>
            </ul>
        </div>
        <div class="next-step" @click="nextSupplement">下一步</div>
    </div>
</template>

<script>


export default {
    name: "Step",
    data: function () {
        return {
            imgSrc: "",
            imgSrcBack: ""

        }
    },
    methods: {
        nextSupplement: function () {
            this.$router.push({
                path: '/Supplement'
            });
        },
        chooseFront: function () {
            this.$refs['id_front'].click();
        },
        chooseFrontBack: function () {
            this.$refs['id_frontBack'].click();
        },

        uploadImage(e) {
            let file = e.target.files[0];
            let img = new FileReader();
            img.readAsDataURL(file);
            console.log("img:", img)
            img.onload = ({ target }) => {
                this.imgSrc = target.result;
                console.log("target:", target)
            };
        },
        uploadImageBack(e) {
            let file = e.target.files[0];
            let img = new FileReader();
            img.readAsDataURL(file);
            console.log("img:", img)
            img.onload = ({ target }) => {
                this.imgSrcBack = target.result;
                console.log("target:", target)
            };
        }
    }
}

</script>

<style scoped lang="less">
@import "../styles/common.less";
@import "../styles/step.less";
</style>

```

你好，上传是上传到云数据库还是用的组件？上传成功之后获取上传之后的网络地址就可以