JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 32
  • Score
    100M100P100Q66418F
  • License MIT

通过对 element-ui 的 upload 组件进一步封装, 使得图片上传更加容易

Package Exports

  • vue-ele-upload-image

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-ele-upload-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-ele-upload-image | 基于 element-ui 的简单且强大的图片上传组件

MIT Licence npm size download

介绍

vue-ele-upload-image 通过对 element-ui 的 upload 组件进一步封装, 使得图片上传更加容易, 具体特点如下:

  • 简单: 一个参数即可支持单张图片模式/多张图片模式/拖拽上传/裁剪上传
  • 实用: 普通模式/拖拽模式/裁剪模式图片列表表现形式一样
  • 未阉割原 upload 组件功能

效果图

效果图

在线示例

https://codepen.io/dream2023/pen/pXvxqP/

安装

npm install vue-ele-upload-image --save

使用

// 全局引入
import EleUploadImage from 'vue-ele-upload-image'
Vue.component(EleUploadImage.name, EleUploadImage)
// 局部引入
import EleUploadImage from 'vue-ele-upload-image'
export default {
  components: {
    EleUploadImage
  }
}

示例

<!-- 默认(单张, 点击上传) -->
<ele-upload-image
  action="https://jsonplaceholder.typicode.com/posts/"
  v-model="images"
></ele-upload-image>
<!-- 多张(multiple) -->
<ele-upload-image
  multiple
  action="https://jsonplaceholder.typicode.com/posts/"
  v-model="images"
></ele-upload-image>
<!-- 拖拽上传(drag) -->
<ele-upload-image
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  v-model="images"
></ele-upload-image>
<!-- 拖拽上传(crop) -->
<ele-upload-image
  crop
  action="https://jsonplaceholder.typicode.com/posts/"
  v-model="images"
></ele-upload-image>

Props 参数