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

JaneYork

发布于 2024-05-25 14:32:34

720

发布于 2024-05-25 14:32:34

文章被收录于专栏：PUSDN平行宇宙软件开发者网PUSDN平行宇宙软件开发者网

简述

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

前情提示

暂仅支持：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>

属性说明

属性	必须	说明
number	否	默认：4张，若上传单张设置为1
isMultiple	否	默认：false，是否可多选
limitWidth	否	图片限制，0不限制
limitHeight	否	图片限制，0不限制
acceptType	否	媒体类型，默认所有图片，可以选择固定后缀 acceptType: 'image/x-png, image/jpg, image/jpeg, image/gif'