xiaobu-upload-img

基于element-ui的 el-upload 图片上传组件开发出来的实用图片上传组件。 支持图片裁剪、压缩、预览、下载、最大上传图片数量控制、不可编辑配置等功能。

快速开始

npm install xiaobu-upload-img

引入

使用如下方式引入时，会自动全局注入一个 this.$xiaobuImgPreview() 方法, 使用方法 点击阅读文档

import Vue from "vue";
import XiaobuUploadImg from 'xiaobu-upload-img'
Vue.use(XiaobuUploadImg)

使用下方方式引入时，前提为项目有引入xiaobu-img-preview插件包，否则预览照片时会因为缺失this.$xiaobuImgPreview() 方法导致报错。

import {XiaobuUploadImg} from 'xiaobu-upload-img'

export default {
  components: {
    XiaobuUploadImg
  }
}

使用

<template>
  <div class="demo">
    <el-button @click="preview">点击自带图片预览功能</el-button>
    <xiaobu-upload-img :openCropper="true" v-model="imgList" @imgChange="handleImgChange"></xiaobu-upload-img>
  </div>
</template>
<script> 
export default { 
  data() {
    return {
      imgList: [
        {
          url: "https://www.xiaobu.host/static/xiaobu-logo.png",
          name: "xiaobu-logo.png"
        }
      ]
    }
  },
  methods: {
    preview() {
        this.$xiaobuImgPreview({
          clickMaskCLose: true, // 点击遮罩关闭预览
          url: "https://www.xiaobu.host/static/xiaobu-logo.png",
        })
    },
    handleImgChange(val) {
      console.log(val, this.imgList)
    }
  }
}
</script>

配置项

支持el-upload原生组件的属性及方法

| 参数 | 说明 | 类型 | 默认值 | | ---------------------- | -------------------------------------------------------- | -------- | ------------------------- | | formatImgFun | 图片格式化方法，自定义处理图片路径 / 地址 | Function | (img) => { return img } | | isCompress | 是否开启图片压缩功能 | Boolean | true | | compressMaxSize | isCompress开启时生效，图片最大允许大小，单位：KB | Number | 500 | | compressInitialQuality | isCompress开启时生效，图片初始压缩质量，取值范围 0~1 | Number | 0.9 | | compressMinQuality | isCompress开启时生效，图片最小压缩质量，取值范围 0~1 | Number | 0.5 | | compressStep | isCompress开启时生效，递归压缩时，每次减少的压缩质量步长 | Number | 0.1 | | disabled | 是否禁用组件上传功能 | Boolean | false | | openCropper | 是否开启图片裁剪功能 | Boolean | false | | options | 图片裁剪插件配置项，透传给裁剪组件 | Object | 默认配置看下文 | | acceptTips | 上传图片格式不合法时的提示文案 | String | 请上传正确格式图片 | | accept | 允许上传的图片格式 | String | .jpg,.png,.jpeg,.gif | | max | 最大允许上传的图片数量 | Number | 3 | | autoUploadImg | 同原生组件的 autoUpload，是否选中图片后自动上传 | Boolean | false | | uploadUrl | 同原生组件的 action，图片上传的后端接口地址 | String | # | | value / v-model | 绑定已上传的图片列表，支持双向绑定 | Array | [] |

options的默认配置

    img: "", // 裁剪图片的地址
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式
        info: true, // 裁剪框的大小信息
        canScale: true, // 图片是否允许滚动缩放
        autoCrop: true, // 是否默认生成截图狂
        autoCropWidth: 300, // 默认生成截图框宽度
        autoCropHeight: 300, // 默认生成截图框高度
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        fixedBox: false, // 固定截图框大小 不允许改变
        canMove: true, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: true, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        high: false, // 是否按照设备的dpr输出等比例图片
        infoTrue: true, // true为展示真实输出图片宽高false展示看到的截图框宽高
        maximgSize: 800, // 限制图片最大宽度和高度
        enlarge: 1, // 图片根据截图框输出比例倍数
        mode: "contain" // 图片默认渲染方式(contain, cover, 100px, 100% auto)

额外暴露的方法

暴露 compressImg 压缩方法 使用时 需引入

import { compressImg } from 'xiaobu-upload-img'

/**
 * 图片压缩函数
 * @param {File} file - 图片文件对象
 * @param {number} [maxSize=500] - 最大允许大小(KB)
 * @param {number} [initialQuality=0.9] - 初始压缩质量(0-1)
 * @param {number} [minQuality=0.5] - 最小压缩质量(0-1)
 * @param {number} [step=0.1] - 每次递归压缩质量减少的步长
 * @returns {Promise<Blob>} - 返回压缩后的图片Blob对象
 */
compress(
  file,
  maxSize = 500,
  initialQuality = 0.9,
  minQuality = 0.5,
  step = 0.1,
)

打赏