<template>
    <div>
        <el-upload class="upload-demo" :multiple="true" action="https://neibu.qk*****.com"
         :http-request="handlePost" accept="bmg,.png,.jpg,.jpeg" :before-upload="beforeAvatarUpload" :on-success="handleSuccess"
         :on-error="hanldeError" multiple :limit="20">
            <el-button size="small" type="primary">添加图片</el-button>
        </el-upload>
    </div>
</template>
<script>
    //  npm i image-conversion --save

    import {compress,compressAccurately} from "image-conversion";
    export default {
        data() {
            return {

            }
        },
        methods: {
            handlePost(f) {
                var me = this;
                let fd = new FormData()
                fd.append('file', f.file)
                me.$axios.post(this.$url+"/file/uploadimg", fd)
                    .then(function(result) {
                        console.log(result)
                        if (result.data.result == true) {
                            me.$message({
                                message: '上传成功',
                                type: 'success'
                            })
                            // me.userhead = result.data.pojo;
                            // me.imageUrl = "https://neibu.qklshequ.com/bbs" + result.data.pojo;
                        }
                        if (result.data.result == false) {
                            me.$message({
                                message: '上传失败',
                                type: 'error'
                            })
                        }
                    })
            },
            handleSuccess(res, file) {
                console.log(res)
                // 服务器返回结果处理
            },
            hanldeError(res, file) {
                console.log(res)
                // 服务器返回结果处理
            },
            beforeAvatarUpload(file) {
                // console.log(file)
                let isLt2M2 = file.size / 1024 / 1024 < 1
                // console.log(isLt2M2)
                if (!isLt2M2) {
                    this.$message.error('上传头像图片大小不能超过 1MB!');
                    return false
                }else{
                    return new Promise((resolve, reject) => {
                        let _URL = window.URL || window.webkitURL
                        let isLt2M = file.size / 1024 < 50 //                       
                        let img = new Image()
                        img.onload = function() {
                            file.width = img.width
                            file.height = img.height
                            let valid = img.width > 1800
                            if (valid || isLt2M) {
                                compressAccurately(file, {
                                    size: 50,
                                    width: 1800
                                }).then(res => {
                                    resolve(res)
                                })
                            } else resolve(file)
                        }
                        img.src = _URL.createObjectURL(file)
                    })
                }

            }
        }

    }
</script>
<style scoped>

</style>