ant design 预览图片_ant-design-vue 上传图片组件

listType="picture-card"

class="avatar-uploader"

:showUploadList="false"

action="自己的api"

headers="{token:‘token值‘}"

:beforeUpload="beforeUpload"

@change="handleFrontImgChange">

placement="top">

:src="idCardFront"

alt="正面" />

type="loading" />

style="width:100%"

:src="idCardFront"

alt="正面" />

上传

handleFrontImgChange (info) {

if (info.file.status === ‘uploading‘) {

this.loadingFront = true;

return;

}

let res = info.file.response // 后端返回的数据

if (info.file.status === ‘done‘) {

this.loadingFront = false;

if (res.status && res.status != ‘1‘) {

this.$message.error(res.info)

return

}

this.idCardFront = res.data.fileName

}

if (info.file.status === ‘error‘) {

this.$message.error(res.error)

}

},

beforeUpload (file) {

const isJPG = file.type === ‘image/jpeg‘ || file.type === ‘image/png‘;

if (!isJPG) {

this.$message.error(‘仅支持jpeg/png格式!‘);

}

const isLt2M = file.size / 1024 / 1024 < 5;

if (!isLt2M) {

this.$message.error(‘上传不能超过5MB!‘);

}

return isJPG && isLt2M;

}