图片上传一站式解决方案。
Warning
ImgPond 已推出 Element Plus (Vue 3) & Element UI (Vue 2.7/2.6) 一体通用版本
v-model，支持任意绑定值类型npm i imgpond
<script>
import Vue from 'vue'
import PicViewer from 'pic-viewer'
import ImgPond from 'imgpond'
Vue.use(PicViewer, {
// 全局配置
})
export default {
components: { ImgPond },
}
</script>
<template>
<ImgPond
v-model="value"
v-bind="{/* 局部配置 */}"
/>
</template>
import PicViewer from 'pic-viewer'
import ImgPond from 'imgpond'
Vue.use(PicViewer, {
// 全局配置
})
Vue.use(ImgPond, {
// 全局配置
})
⚠ 暂不支持 (ElementUI 未提供 ESM 导出)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css"
>
</head>
<body>
<div id="app">
<img-pond v-model="value"></img-pond>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pic-viewer@0.11"></script>
<script src="https://cdn.jsdelivr.net/npm/imgpond@0.14"></script>
<script>
Vue.use(PicViewer)
Vue.use(ImgPond)
new Vue({
data() {
return {
value: undefined,
}
},
}).$mount('#app')
</script>
</body>
</html>
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value / v-model | 绑定值 | any | |
| arrayed | 绑定值是否为数组类型，默认自动 | boolean | |
| srcAt | 图片链接的位置 | string / symbol / (value: any) => any | |
| upload | 调用接口上传图片，返回图片链接 | (output: File | Blob) => Promise<string | object> | string | object | void | |
| count | 数量限制 | number / [number?, number?] | |
| size | 大小限制 (MB) | number / [number?, number?] | |
| accept | 图片格式筛选 | string | 'image/*' |
| outputType | 图片输出格式 (编辑后)，默认原格式 | string | |
| validator | 自定义数据源校验器 | (source: File | Blob | string) => boolean | |
| disabled | 禁用状态 | boolean | false |
| editable | 是否开启编辑功能 | boolean | true |
| width | 宽度或宽度范围 (像素) | number / [number?, number?] | |
| height | 高度或高度范围 (像素) | number / [number?, number?] | |
| aspectRatioTolerance | 锁定裁剪比例的公差 | number | 0 |
如果数量上限和图片数量均不超过 1，则处于单选状态，否则为多选
默认情况下，在单选时输出的绑定值形如：item，多选时输出的绑定值形如：[item，item]
item 具体是什么格式？
未配置 srcAt 时，会提取图片链接作为 item，配置了则不会
如果将 arrayed 设置为 true 则强制输出数组类型，无论单选还是多选
如果将 arrayed 设置为 false 则强制输出非数组类型，如果此时图片数量为多个，则会执行 JSON.stringify
用于定位 value 和 upload 返回值中的图片链接，适用于绑定值非图片链接本身的情况
'url''data[0].url'value => value.url开启编辑功能时，会在编辑完成后调用，未开启编辑功能时，会在选择图片后调用
未配置或函数返回值为空时，绑定值将输出二进制文件
参数为编辑产物：
用户选择本地文件、编程式提供 File 类型的数据源时，编辑产物的类型为 File
编程式提供非 File 类型的数据源且编辑了图片时，编辑产物的类型为 Blob
未开启编辑功能或未编辑时，编辑产物即输入值
编程式提供 string 类型的数据源且未编辑时，不需要上传，该方法不会被调用
返回值类型为 Promise<object> 或 object 时需要配置 srcAt
10：限制数量上限为 10 张[1]：限制数量下限为 1 张[, 10]：限制数量上限为 10 张[1, 10]：限制数量下限为 1 张，且上限为 10 张10：限制大小上限为 10 MB[1]：限制大小下限为 1 MB[, 10]：限制大小上限为 10 MB[1, 10]：限制大小下限为 1 MB，且上限为 10 MB100：限制宽度为 100 像素[100]：限制宽度下限为 100 像素[, 200]：限制宽度上限为 200 像素[100, 200]：限制宽度下限 100 像素，且上限为 200 像素100：限制高度为 100 像素[100]：限制高度下限为 100 像素[, 200]：限制高度上限为 200 像素[100, 200]：限制高度下限 100 像素，且上限为 200 像素通过文件对话框选择图片时，优先展示指定类型的文件，同原生 input 的 accept
⚠ 用户仍可以选择其它类型，文件类型校验应使用 validator
可选值：
'.jpg.jpeg.png''image/jpeg,image/png'开启编辑模式时，可以指定输出的图片格式，可选值参考 MIME type
同 el-upload
| 名称 | 说明 | 回调参数 |
|---|---|---|
| size-error | 未开启编辑模式，且图片大小不符合要求时触发 | 图片体积 (Byte) |
| width-error | 未开启编辑模式，且图片宽度不符合要求时触发 | 图片宽度 (像素) |
| height-error | 未开启编辑模式，且图片高度不符合要求时触发 | 图片高度 (像素) |
| ... | el-upload 的事件 (Function 类型的属性，去掉 on 前缀) |
<ImgPond
@remove="onRemove"
@beforeUpload="onBeforeUpload"
/>
| 名称 | 说明 | 参数 |
|---|---|---|
| openEditor | 打开图片编辑对话框 | (source: File | Blob | string | File[] | Blob[] | string[]) => void |
参数为输入的数据源，支持的数据类型有：
document 创建如果没有编辑图片，则输出值类型不变 (与输入值一致)
如果编辑了图片，输入类型为 File 时，输出类型也为 File，其它情况均输出 Blob 类型
如果未开启编辑模式，且限制了图片大小或宽高，则需要 await openEditor(...)
<!-- 示例: 输入图片链接进行编辑 -->
<!-- 如果需要附加图片名称，可以先转换为 File 类型再输入 -->
<script setup>
const imgPondRef = ref()
async function urlToFile(url, fileName) {
const blob = await (await fetch(url)).blob()
return new File([blob], fileName, { type: blob.type })
}
async function openEditor() {
const file = urlToFile('https://picsum.photos/100', '100x100.jpg')
await imgPondRef.value.openEditor(file)
}
function upload(file) {
return POST.upload(import.meta.env.VITE_APP_UPLOAD_API, {
file,
}).then(res => res.data.data)
}
</script>
<template>
<ImgPond
v-show="false"
ref="imgPondRef"
:upload="upload"
/>
<el-button @click="openEditor">
编辑图片
</el-button>
</template>
<script setup>
const accept = '.jpg,.jpeg,.png'
const extension = accept.split(',')
function validator(source) {
let valid = true
if (source instanceof File) {
valid = extension.includes(source.name.replace(/.+\./, '.').toLowerCase())
if (!valid) {
alert(`"${source.name}" 的格式不在可支持范围: ${accept}`)
}
}
return valid
}
</script>
<template>
<ImgPond
:accept="accept"
:validator="validator"
/>
</template>
图片经过编辑后，输出的体积与以下因素相关：
<script setup>
const imgPondRef = ref()
console.log(imgPondRef.value.uploading)
</script>
<template>
<ImgPond ref="imgPondRef" />
</template>
'url'，使图片能够正常预览<template>
<ImgPond
class="custom-trigger"
list-type="text"
mb="8px"
>
<el-button>自定义 trigger</el-button>
</ImgPond>
</template>
<style lang="scss" scoped>
.custom-trigger {
:deep(.pic-viewer),
:deep(.el-upload-list),
:deep(.el-upload__tip),
:deep(.el-upload__text) {
display: none;
}
}
</style>
<ImgPond
:width="200"
:height="100"
:size="10"
:count="1"
>
<template #tip="{ count, size, dimension, accept }">
<div>{{ count }}</div>
<div>{{ size }}</div>
<div>{{ dimension }}</div>
<div>{{ accept }}</div>
</template>
</ImgPond>
以宽高 50px 为例，修改为如下样式：
:deep(.pic-viewer li) {
margin: 0 !important; // 如果允许多张，则去掉这行
img {
height: 50px !important;
}
}
:deep(.el-upload-list__item) {
width: 50px;
height: 50px;
margin: 0; // 如果允许多张，则去掉这行
&>.el-upload-list__item-status-label {
width: 34px;
height: 18px;
&>i {
margin-top: 0;
}
}
.el-upload-list__item-actions {
line-height: 50px;
font-size: 16px;
&>span+span {
margin-left: 4px;
}
}
}
:deep(.el-upload) {
width: 50px;
height: 50px;
line-height: 50px;
margin: 0;
&>.el-icon-plus {
font-size: initial;
}
&>.el-upload__text {
display: none;
}
}
各版本详细改动请参考 release notes
FAQs
Image uploading one-stop solution.
We found that imgpond demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.