README

imgpond

特性

支持 v-model
支持上传前裁剪图片，可固定裁剪比例、限定比例范围
可限制图片体积上下限、数量上下限
可多选
可拖拉拽排序
灵活的数据类型：支持字符串、JSON字符串、字符串数组、对象、对象数组
支持上传后、禁用时预览图片
适配 element-ui （禁用状态默认跟随 el-form）
全局或局部引入，参数支持全局或局部配置

安装

NPM

$ npm add imgpond vue@2 element-ui pic-viewer viewerjs

// 全局引入

import 'imgpond/dist/style.css'
import Imgpond from 'imgpond'

Vue.use(Imgpond, {
  // 全局配置
})

<!-- 局部引入 -->

<template>
  <Imgpond v-model="value" v-bind="{/* 局部配置 */}"/>
</template>

<script>
import 'imgpond/dist/style.css'
import Imgpond from 'imgpond'

export default {
  components: { Imgpond },
}
</script>

参数

参数名	说明	类型	可接受值	默认值
v-model, value	绑定值	string, string[], object, object[]
valueType	数据类型	string	'string', 'array'	'auto'
srcAt	图片src所在的键	string
upload	调用接口上传图片	Function	axios, axios实例等
disabled	是否禁用	boolean		false
fixedRatio	固定裁剪比例	string, string[]
fixedRatioDeviation	固定裁剪比例误差范围（默认在小于±10%时不裁剪直接上传）	number		0.1
size	图片大小限制（单位MB）	number, number[]		10
count	数量上限	number, number[]		50
accept	接受的图片文件类型	string	MIME type	'.jpg,.jpeg,.png'
edit	是否开启裁剪功能	boolean		true
localProxy	本地代理	object
proxy	代理	object

upload

imgpond将使用该方法调用接口上传图片，返回图片链接用于回显

非必填，未配置时，value将得到图片的base64编码

可选的返回值：

promise实例: 必须resolve一个图片链接，或一个包含图片链接的对象（需要配置urlAt）
string: 一个图片链接，或一个包含图片链接的对象（需要配置urlAt）
undefined: 与未配置upload效果相同，value将得到图片的base64编码

示例代码

valueType

默认自动：

数量上限为1，且srcAt为空时，采用字符串类型
数量上限大于1时，采用数组类型

srcAt

如果需要绑定值是 对象 或 对象数组 类型，则需要指定对象中图片src所在的键

初始绑定值为对象或对象数组类型时，该参数必填

upload的返回值为对象类型时，该参数必填

accept

图片格式校验采用 原生input元素的accept属性 + 文件后缀名 双重校验

fixedRatio

1/1: 限制宽高比为1比1
['1/1']: 限制宽高比下限不低于1比1
['1/1', '2/1']: 限制宽高比下限不低于1比1，且上限不超过2比1

count

10: 限制数量上限不超过10张
[1]: 限制数量下限不低于1张
[1, 10]: 限制数量下限不低于1张，且上限不超过10张

size

10: 限制体积上限不超过10MB
[1]: 限制体积下限不低于1MB
[1, 10]: 限制体积下限不低于1MB，且上限不超过10MB

proxy & localProxy

如果存在跨域问题：

配置Imgpond，将跨域请求转为同域请求，并附上路径标识

一种场景是项目本地调试时，由于localhost和图片链接域名不同导致跨域，需要配置代理，但上线后不再需要，此时使用localProxy

仅 localhost / 127.0.0.1 生效
另一种场景是图片链接域名属于第三方，无论是本地还是线上环境，都需要代理，此时使用proxy

Vue.use(Imgpond, {
  proxy: {
    '/amap-img': 'store.is.autonavi.com'
  }
})

在 vue.config.js 中配置代理，将标识过的请求转发到真实的地址

module.exports = {
  devServer: {
    proxy: {
      '/amap-img': {
        target: `http://store.is.autonavi.com`,
        pathRewrite: {
          ['^/amap-img']: ''
        }
      }
    },
  },
}

配置规则

双向绑定参数（v-model / value）仅支持局部配置
其余参数均支持全局或局部配置

权重：

局部配置高于全局配置
对于对象类型的参数，局部配置会与全局配置进行合并，同名属性会被局部配置覆盖

事件

名称	说明	参数
wrong-size	选择的图片体积不正确时	图片体积（单位字节）
...el-upload事件

<!-- warning: 原生el-upload的事件并不是真正的事件，而是function属性，Imgpond以真正事件的形式暴露，并去掉了on前缀 -->

<Imgpond @remove="onRemove" @beforeUpload="onBeforeUpload"/>

Usage no npm install needed!