vue-upload-image-xw

A Vue.js component which allows drag and paste image

Usage no npm install needed!

<script type="module">
  import vueUploadImageXw from 'https://cdn.skypack.dev/vue-upload-image-xw';
</script>

README

vue-upload-image-xw

一个基于 vue 的图片上传组件，支持本地图片选中上传、本地图片拖拽上传、剪贴板图片粘贴(ctrl+v)三种方式，同时，支持上传图片删除及图片浏览。

Installing

依赖库：vue 2.5+, vue-easy-lightbox 0.10+

npm install vue-easy-lightbox --save

import UploadImageXw from 'vue-upload-image-xw'

版本链

v1.0.1 基础功能搭建 v1.0.2 修复图片预览Icon加载失败 v1.0.3 支持用户传参

Example

<template>
  <div>
    <upload-image @data-change="changeUploadImageList"> </upload-image>
  </div>
</template>

<script>
export default {
  data () {
    return {
      uploadImages: [] // 待上传的图片
    }
  },
  methods () {
    changeUploadImageList(data) {
      this.uploadImages = data
    }
  }
}
</script>

Options

Props

name type default description
maxImageNum Number 10 Maximum upload image
maxImageSize Number 1000 * 1000 Maximum Image size
paste Boolean true support paste image
drop Boolean true support drop Image
uploadText String 在此区域点击、拖拽或粘贴上传图片 /

Events

name arguments description
data-change (images) Upload images changed