美文网首页
vue element-ui 压缩图片上传

vue element-ui 压缩图片上传

作者: 嫑着急 | 来源:发表于2020-05-11 11:26 被阅读0次
    <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>
    
    

    相关文章

      网友评论

          本文标题:vue element-ui 压缩图片上传

          本文链接:https://www.haomeiwen.com/subject/yhzynhtx.html