简述

图片压缩、图片预览、图片多图上传、默认高清压缩

前情提示

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

一只哈基米~~

截图

[图片上传失败...(image-2fa84-1706585747963)]

[图片上传失败...(image-ed3401-1706585747963)]

[图片上传失败...(image-fa65e1-1706585747963)]

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

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

            <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>

属性说明

属性

必须

说明

|
|

number

否

默认：4张，若上传单张设置为1

|
|

isMultiple

否

默认：false，是否可多选

|
|

limitWidth

否

图片限制，0不限制

|
|

limitHeight

否

图片限制，0不限制

|
|

acceptType

否

媒体类型，默认所有图片，可以选择固定后缀 acceptType: 'image/x-png, image/jpg, image/jpeg, image/gif'

附件下载

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

问题反馈

若在使用中发现问题、发现部分项目不支持，或者不满足业务，请第一时间反馈！！

其他

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

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