<template>
<Upload id="Upload"
ref="upload"
:before-upload='beforeUpload'
type="drag"
action='#'
style="display: inline-block;width:97px;">
<div style="width: 97px;height:90px;line-height: 90px;"
v-show="imageUrl == false">
<Icon type="md-camera"
size="20"></Icon>
</div>
<div style="width: 97px;height:90px;line-height: 90px;"
v-show="imageUrl == true">
<img style='width:100%;height:100%'
:src="seriesImage"
alt="">
</div>
</Upload>
</template>
<script>
import gifLoading from ../assets/icon/loading.gif'
export default {
data(){
imageUrl: false,
seriesImage: gifLoading,
imgSize: 800, // 上传图片大小限制,单位 kb
imgTypeArr: ["image/png", "image/jpg", "image/jpeg"],//上传图片类型限制
},
methods:{
//上传文件之前钩子函数
beforeUpload (res) {
let that = this
// 控制文件上传格式
var imgType = this.imgTypeArr.indexOf(res.type) !== -1
if (!imgType) {
this.$Message.warning({
content: '文件 ' + res.name + ' 格式不正确, 请选择jpg或png.',
duration: 5
});
return false
}
// 控制文件上传大小
var Maxsize = res.size / 1024 < this.imgSize
if (!Maxsize) {
this.$Message.warning({
content: '文件 ' + res.name + ' 体积过大, 最大不能超过800K.',
duration: 5
});
return false
}
this.file = res
this.checkImageWH(res, 750, 422)
return false
},
//判断照片尺寸大小
checkImageWH (file, width, height) {
let self = this;
return new Promise(function (resolve, reject) {
let filereader = new FileReader();
filereader.onload = e => {
let src = e.target.result;
var status = 0
const image = new Image();
image.onload = () => {
if (width && image.width > width) {
self.$Message.error(
'高度不得大于' + width
);
status = -1
reject();
} else if (height && image.height > height) {
self.$Message.error(
'宽度不得大于' + height
);
status = -1
reject();
} else {
resolve();
}
if (status == 0) {
// 图片base64化 可以在这里设置路径预览图片
self.DetailsObj.seriesImage = src;
}
};
image.onerror = reject;
image.src = src;
};
filereader.readAsDataURL(file);
});
},
}
}
</script>
<style lang="scss" scoped>
</style>
iview上传图片控制格式、文件大小、宽高
最新推荐文章于 2024-04-30 10:48:26 发布