Vue 自定义样式的上传照片 前后端

 除了弹出提醒使用是element框架，其他的自定义

效果图：

前端部分

<template>
    <div>
        <div class="A-AngImgAdd">
            <div class="title">请上传详细照片</div>
            <div class="ico">注：每张照片大小不能超过20M，且最多四张照片</div>
            <div class="add"><input type="file" class="file" ref="files"
                                    accept="image/jpg,image/jpeg,image/png,image/PNG" v-on:change="up"></div>
            <div class="addico" v-bind:style="imgico_color">状态：{{imgico}}</div>
            <div class="addico">已上传图片数量：{{imgdata.length}}</div>
            <div class="Imgdata">
                <div class="loop" v-for="(item,index) in imgdata" :key="index" v-html="item.img" @click="Go_ImgUrl(item.imgurl)"></div>
            </div>
            <div class="Submit">
                <div class="success" @click="Img_OK()">确定</div>
                <div class="error" @click="Imgerror()">取消</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imgico: '尚未上传',
            imgico_color: '',
            tempImg: '',
            imgdata: []
        };
    },
    mounted() {

    },
    methods: {
        Go_ImgUrl(img){
            window.open(img);
        },
        Img_OK(){
            this.$alert('成功上传', '系统', {
                confirmButtonText: '确定'
            });
        },
        Imgsuccess() {
            if (this.tempImg == '') {
                this.$alert('你未选择图片！请重试', '系统', {
                    confirmButtonText: '确定'
                });
                return;
            }
            if (this.imgdata.length >= 4) {
                this.$alert('已达到上传上线，请重试', '系统', {
                    confirmButtonText: '确定'
                });
            } else {
                this.$http.post(process.env.VUE_APP_URL + 'admin/Imgbase', {
                    imgData: this.tempImg
                }).then((data) => {
                    let sumimg = data.data;
                    if (sumimg == 0) {
                        alert('服务异常');
                    } else {
                        this.imgdata.push({ img: `<img style=" width: 179px;height: 180px; cursor: pointer;" src="http://127.0.0.1:3000/image/${sumimg}"/>`,imgurl:'http://127.0.0.1:3000/image/'+sumimg});
                        this.imgico = '上传成功';
                        this.imgico_color = ' color: #547a22;';
                        this.tempImg = '';
                        if (this.imgdata.length >= 4) {
                            setTimeout(() => {
                                this.imgico = '已达到图片上限';
                                this.imgico_color = '';
                            }, 2000);
                        } else {
                            setTimeout(() => {
                                this.imgico = '等待上传';
                                this.imgico_color = '';
                            }, 2000);
                        }
                    }
                });
            }
        },
        Imgerror() {
            // let imgfiles=this.$refs.files.files[0];

        },
        up(e) {
            // 获取待上传的文件对象
            let file = e.target.files[0];
            // // 声明一个读取文件对象
            let reader = new FileReader();
            // // 开始读取文件内容
            reader.readAsDataURL(file);
            // // 读取操作结束时触发
            reader.onloadend = (ev) => {
                // 赋值给vue对象属性
                this.tempImg = ev.currentTarget.result;
                this.imgico = '已选择图片，正在上传';
                this.imgico_color = ' color: #547a22;';
                this.Imgsuccess();
            };
        }
    }
};
</script>

<style scoped lang="scss">
    @mixin Pas_button {
        position: absolute;
        text-align: center;
        transition: 0.2s;
        cursor: pointer;
    }

    .A-AngImgAdd {
        width: 800px;
        height: 420px;
        background-color: #f5f5f5;

        .title {
            font-size: 17px;
            height: 60px;
            width: 100%;
            line-height: 60px;
            text-indent: 2rem;
        }

        .add {
            width: 30px;
            height: 30px;
            margin-left: 50px;
            margin-top: 10px;
            background-size: 100% 100%;
            background-image: url("../../../public/image/Imgadd.png");
            position: relative;
            display: inline-block;

            .file {
                opacity: 0;
                width: 100%;
                height: 100%;
            }
        }

        .addico {
            color: darkred;
            font-size: 11px;
            display: inline-block;
            width: 160px;
            height: 30px;
            line-height: 30px;
            margin-left: 20px;
        }

        .ico {
            font-size: 11px;
            color: rgba(64, 18, 1, 0.68);
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-indent: 2rem;
        }

        .Imgdata {
            width: 94.8%;
            height: 183px;
            padding: 20px;
            .loop {
                background-size: 100% 100%;
                width: 179px;
                height: 180px;
                margin-right: 10px;
                display: inline-block;
            }
        }

        .Submit {
            width: 100%;
            height: 50px;
            position: relative;

            .success {
                @include Pas_button;
                width: 100px;
                height: 30px;
                line-height: 30px;
                border-radius: 10px;
                border: 1px solid aquamarine;
                right: 170px;
                top: 10px;
            }

            .success:hover {
                background-color: aquamarine;
                color: #ffffff;
                font-weight: bold;
            }

            .error {
                width: 100px;
                height: 30px;
                @include Pas_button;
                top: 10px;
                right: 50px;
                line-height: 30px;
                border-radius: 10px;
                border: 1px solid darkred;
            }

            .error:hover {
                background-color: darkred;
                color: #ffffff;
                font-weight: bold;

            }
        }
    }

</style>

后端部分：

router.post('/Imgbase', function(req, res) {
    /**
     * 1.接收内容2.过滤开头编码方式3.转换图片png格式4.图片保存
     * @type {methods.tempImg}
     */
    let imgData = req.body.imgData;
    var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
    let Timesum=m.A_USA_TIMES_COM();
    let hash = crypto.createHmac('sha1', Timesum).digest('hex');
    var dataBuffer = new Buffer(base64Data, 'base64');
    fs.writeFile('./public/image/'+hash+".png", dataBuffer, function(err) {
        if(err){
            res.send(0);
        }else{
            res.send(hash+".png");
        }
    });
});