<template>

<div>

    <div class="header">添加淘宝买号</div>

    <div class="tips">

        <p class="font16">注意事项</p>

        <p class="font14">买号采用人工审核，提交后0.5个工作日内完成审核，请耐心等待，新手务必认真准确填写。</p>

    </div>

    <el-form ref="taobao" :model="taobaoInfo" label-width="100px" class="miForm">

        <el-form-item label="淘宝买号">

            <el-input v-model="taobaoInfo.name" placeholder="请输入淘宝的会员名"></el-input>

        </el-form-item>

        <el-form-item label="买号等级">

            <el-select v-model="taobaoInfo.level" placeholder="请选择买号星级">

                <el-option

                  v-for="item in options"

                  :key="item.value"

                  :label="item.label"

                  :value="item.value">

                </el-option>

            </el-select>

        </el-form-item>

    </el-form>

    <div class="upload">

        <img v-if="src" :src="src" alt="user image" height="100%" width="100%">

        <input type="file" @change="uploadIMG" ref="file" id="file">

        <label for="file"><i class="el-icon-plus"></i></label>

        <div class="del"><i class="el-icon-error" @click="delImg"></i></div>

    </div>

</div>

</template>

<script type="ecmascript-6">

export default {

    name:'taobao',

    data(){

        return {

            taobaoInfo:{},

            options:[

                {label:'一心',value:},

                {label:'二心',value:},

                {label:'三心',value:},

                {label:'四心',value:},

                {label:'五心',value:},

                {label:'一钻',value:},

                {label:'二钻',value:},

                {label:'三钻',value:},

                {label:'四钻',value:},

                {label:'五钻',value:}

            ],

            src: ''// 转base64码后的data字段

        }

    },

    methods:{

        getFile (file) {

            let _this = this

            if (!file || !window.FileReader) return // 看支持不支持FileReader

            if (/^image/.test(file.type)) {

                //创建一个reader

                let reader = new FileReader()

                reader.readAsDataURL(file) // 这里是最关键的一步，转换就在这里

                reader.onloadend = function () {

                    _this.src = this.result 

                    let result = this.result;

                    let img = new Image();

                    img.src = result;

                    console.log("未压缩前的图片大小：" + result.length);

                    img.onload = function() {

                        let data = _this.compress(img);

                        let blob = _this.dataURItoBlob(data);

                        console.log("base64转blob对象：" + blob);

                        var formData = new FormData();

                        formData.append("file", blob);

                        console.log("将blob对象转成formData对象：" + formData.get("file"));

                        let config = {

                            headers: { "Content-Type": "multipart/form-data" }

                        };

                        // 发送请求;

                        _this.axios.post(_this.uploadUrl.url, formData, config).then(res => {

                            if (res.data.code == ) {

                                _this.$emit( "getImgsrc", res.data.data.resultftphost, res.data.data.resulturl );

                            } else {

                                _this.$message({

                                    message: "图片上传失败，请重试",

                                    type: "warning"

                                });

                            }

                        });

                    }

                }

            }

        },

        uploadIMG(e) {

            let files = e.target.files || e.dataTransfer.files;

            if (!files.length) return;

            this.picavalue = files[];

            console.log("图片大小：" + this.picavalue.size /  + "kb");

            if (this.picavalue.size /  > ) {

                this.$message({

                    message: "图片过大不支持上传",

                    type: "warning"

                });

            } else {

                this.getFile(this.picavalue);

            }

        },

        // 压缩图片

        compress(img) {

            let canvas = document.createElement("canvas");

            let ctx = canvas.getContext("2d");

            let initSize = img.src.length;

            let width = img.width;

            let height = img.height;

            canvas.width = width;

            canvas.height = height;

            // 铺底色

            ctx.fillStyle = "#fff";

            ctx.fillRect(, , canvas.width, canvas.height);

            ctx.drawImage(img, , , width, height);

            //进行最小压缩

            let ndata = canvas.toDataURL("image/jpeg", 0.1);

            console.log("压缩后的图片大小：" + ndata.length);

            console.log("压缩后的图片内容：" + ndata)

            return ndata;

        },

        // base64转成bolb对象

        dataURItoBlob(base64Data) {

            var byteString;

            if (base64Data.split(",")[].indexOf("base64") >= )

                byteString = atob(base64Data.split(",")[]);

            else

                byteString = unescape(base64Data.split(",")[]);

            var mimeString = base64Data .split(",")[] .split(":")[] .split(";")[];

            var ia = new Uint8Array(byteString.length);

            for (var i = ; i < byteString.length; i++) {

                ia[i] = byteString.charCodeAt(i);

            }

            return new Blob([ia], { type: mimeString });

        },

        //删除事件

        delImg() {

            this.src = null;

        }

    }

}

</script>

<style scoped lang="stylus" rel="stylesheet">

@import '../../assets/stylus/index.styl'

.tips{

    padding 10px

    line-height .5em

}

.el-form-item{

    margin-bottom 18px

    background-color #fff

}

.miForm /deep/ input{

    border none

}

.upload {

    margin-left 20px

    width 150px

    height 150px

    border:2px solid #ddd;

    border-radius: 2px;

    text-align: center;

    overflow:hidden

    position:relative;

    label{

        line-height 150px

        font-size: 30px;

    }

    .del{

        position:absolute;

        right:;

        top:;

        color:red;

    }

}

input[type='file'] {

    display: none;

}

</style>