vue2 图片选择组件,支持多选和拖放

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2 图片选择组件,支持多选和拖放相关的知识,希望对你有一定的参考价值。

https://github.com/bigggge/vu...

vue-image-uploader

Vue2 图片选择上传组件,支持多选和拖放

DEMO

Props

参数 类型 说明 默认值
maxSize Number 单张图片最大大小 3072
placeholder String 占位文字 点击上传图片
onChange Function 文件更改回调(参数:files)

Example

html:

  <div class="hello">
    <image-inputer :onChange="imgChange" :maxSize="maxSize" placeholder="选择图片"></image-inputer>
  </div>

javascript:

  import ImageInputer from ‘@/components/ImageInputer.vue‘

  export default {
    name: ‘hello‘,
    data () {
      return {
        maxSize: 3072
      }
    },
    components: {
      ImageInputer
    },
    methods: {
      imgChange (files) {
        if (files) {
          console.log(files)
        }
      }
    }
  }
</script>

以上是关于vue2 图片选择组件,支持多选和拖放的主要内容,如果未能解决你的问题,请参考以下文章

android之图片选择器ImageSelector的使用

小程序多选和单选组件的封装

HTML5之拖拽和拖放

具有对象数组的多选和 v-model

多选框的全选和全不选(复制)

Flutter 学习 之 图片的选择裁切保存