<script >
import define from "@/utils/define.js"
export default {
props:{
limit: {
type: Number,
default: 1
},
imgAddress: {
type: Array,
default: () => []
},
isLimitWH: {
type: Boolean,
default: false
}
},
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
fileList:[]
};
},
watch: {
imgAddress: {
handler(val) {
console.log("vakll",val);
this.fileList = val
},
immediate: true
}
},
methods: {
handleRemove(file, fileList) {
this.fileList = fileList
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleUploadCheck (file) {
if (this.fileList.length === this.limit) {
this.$message.error('最多只能上传' + this.limit + '张图片!')
return false
}
const typeCheck = /\.(png|jpg|jpeg|svg)$/.test(file.name)
const isLt10M = file.size / 1024 / 1024 < 1
if (!typeCheck) {
this.$message.error(
'上传图片只支持.png .jpg .jpeg .svg格式!'
)
return false
}
if (!isLt10M) {
this.$message.error('上传图片大小不能超过 1MB!')
return false;
}
const isSize = new Promise(function(resolve, reject){
let width = 200;
let height = 120;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function(){
let valid = img.width == width && img.height == height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(()=>{
return file;
}, ()=>{
this.$message({
message:'图片尺寸只能是200*120,请您重新选择!',
type: 'error'
});
return Promise.reject()
return false;//必须加上return false; 才能阻止
})
return typeCheck && isLt10M && isSize
},
handleUploadSuccess (file, type) {
const fileType = 'document'
const isImg = /\.(png|jpg|jpeg|gif|bmp)$/.test(file.data.name)
const url = isImg
? define.comUrl + '/api/file/Image/' + fileType + '/' + file.data.name
: ''
this.fileList[this.fileList.length] = { name: file.data.name, url, fileType, type }
this.$emit('uploadSuccess', this.fileList)
}
}
}
</script>
<template>
<div class="el-upload-file">
<el-upload
:action="define.comUploadUrl + '/document'"
:header="{'Authorization': this.$store.getters.token}"
list-type="picture-card"
:before-upload="v => handleUploadCheck(v)"
:on-success="v => handleUploadSuccess(v)"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="fileList"
accept=".png,.jpg,.jpeg,.svg">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :append-to-body='true'>
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<style scoped lang="scss">
</style>
element-ui 上传图片 限制图片尺寸、大小
最新推荐文章于 2024-08-08 18:56:23 发布