ant design vue、element图片上传组件使用，支持压缩裁剪

简述

前情提示

暂仅支持：bmp, gif, jpg, jpeg, png格式，还不支持svg、webp等格式【升级后支持】

一只哈基米~~

截图

使用方式（主打一个代码可直接复制）

单张图：缩略图、头像、营业执照

<a-form-model-item label="基地营业执照" prop="picture">

<p-image-upload-v2 v-model="form.picture" :number="1" ></p-image-upload-v2>

<span slot="extra" style="color:#F76560; font-size: 11px;-webkit-text-size-adjust: none;">图片大小限制 10MB!</span>

</a-form-model-item>

<a-form-model-item prop="picture" :colon="false" >

<span slot="label">

基地营业执照

<a-tooltip>

<template slot="title">

图片大小不能超过10M哦！

</template>

<a-icon type="question-circle-o" />

</a-tooltip>:

</span>

<p-image-upload-v2 v-model="form.picture" :number="1" ></p-image-upload-v2>

<span v-if="false" slot="extra" style="color:#F76560; font-size: 11px;-webkit-text-size-adjust: none;">图片大小限制 10MB!</span>

</a-form-model-item>

多图批量：轮播、身份证。默认是单张选择，:isMultiple='true' :number="2"

<a-form-model-item prop="picture" :colon="false" >

<span slot="label">

基地营业执照

<a-tooltip>

<template slot="title">

图片大小不能超过10M哦！

</template>

<a-icon type="question-circle-o" />

</a-tooltip>:

<span v-if="false" style="color: red">* 请上传不超过5M的图片</span>

</span>

<p-image-upload-v2

v-model="form.picture"

:number="2"

:isMultiple="true"

:limitWidth="0"

:limitHeight="0"

>

</p-image-upload-v2>

<span slot="extra" style="color:#F76560; font-size: 11px;-webkit-text-size-adjust: none;">图片大小限制 10MB!</span>

</a-form-model-item>

图片裁剪：空间背景图。按比例裁剪

<a-form-model-item prop="picture" :colon="false" >

<span slot="label">

基地营业执照

<a-tooltip>

<template slot="title">

图片大小不能超过10M哦！

</template>

<a-icon type="question-circle-o" />

</a-tooltip>:

<span v-if="false" style="color: red">* 请上传不超过5M的图片</span>

</span>

<p-image-upload-v3

v-model="form.picture"

:number="2"

:isMultiple="false"

:limitWidth="800"

:limitHeight="600"

>

</p-image-upload-v3>

<span slot="extra" style="color:#F76560; font-size: 11px;-webkit-text-size-adjust: none;">图片大小限制 10MB!</span>

</a-form-model-item>

加入提示语

<a-form-model-item prop="picture" :colon="false" >

<span slot="extra1">

<span style="color: red;">请上传不超过10M的图片</span>

</span>

<span slot="label">

广告图片

<a-tooltip>

<template slot="title">

图片大小不能超过10M哦！

</template>

<a-icon type="question-circle-o" />

</a-tooltip>

:

<span v-if='true' style='color: red'>* 请上传不超过10M的图片</span>

</span>

<p-image-upload-v2

v-model="form.picture"

:number="2"

:isMultiple="true"

:limitWidth="0"

:limitHeight="0"

>

</p-image-upload-v2>

</a-form-model-item>属性说明

https://url37.ctfile.com/f/8850437-964070001-8a6d4e?p=4760 (访问密码: 4760)

问题反馈

其他

在线图片压缩：https://janeyork-cn.gitee.io/demo.janeyork.pusdn.com/demo/lrz/