<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>
网友评论