vue-image-upload-preview

基于vue的图片上传和预览插件

该组件引用了 mint-ui 和 lrz

Install

npm install vue-image-upload-preview --save-dev

Usage

• 引入图片上传和预览组件，可按需引入

  import {ImageUpload , ImagePreview} from 'vue-image-upload-preview'

• 注册组件

  components:{
    'image-preview':ImagePreview,
    'image-upload':ImageUpload
  }

• 使用组件

  <template>
    <div>
      <!-- 图片上传 -->
      <image-upload
       class="image-upload"
       ref='imgaeUpload'
       :url='http://XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'
       :touch-size = 1
       :multiple = true
       :lrz-options = {width:1024}
       field-name = 'serverImgFile'
       :data = {}
       :max-count = 10
       @chooseImages='bindtap_chooseImages'
      />
 
      <!-- 图片预览 -->
      <image-preview
        style="z-index:200"
        :images="preImages"
        v-model="index"
        :numIsShow="true"
        :deleteIsShow="true"
        @delete="bindtap_delete"
      />
 
    </div>
  </template>

• 绑定数据

    data() {
      return {
        index: -1,
        images: []
      }
    },
 
    computed:{
      preImages() {
        return this.images.map(v=>{return v.src});
      }
    }

• 上传图片

  this.$refs.imgaeUpload.uploadImages(this.images)
  .then(res => {
    ...
  }).catch(res => {
    ...
  })

• 自定义上传按钮样式

  .image_upload{  height: 60px; width: 60px;background: red}

Props

ImageUpload

• url - String - 上传图片的路径；
• field-name - Stirng - 上传图片的字段名；
• multiple - Boolean - [default:false] - 是否支持图片多选；
• lrz-options - Object - [default:{quality:0.7}] - 图片压缩选项，参考（https://github.com/think2011/localResizeIMG/wiki/2.-参数文档)；
• max-count - Number - [default:-1] - -1表示无限张；
• chooseImages - Function - 选择图片回调；

    bindtap_chooseImages(e){
      /*
       * 选择成功 e是一个数组
       * e[0].file 图片文件对象，用于上传
       * e[0].src 图片base64，用于预览
       * e[0].compress 图片是否经过压缩
       */
       if(Array.isArray(e)){
          this.images = this.images.concat(e);
       }else {
          console.log(e);
       }
    }

ImagePreview

• images - Array - [default:[]] - 预览图片的所有路径；
• deleteIsShow - Boolean - [default:false] - 是否显示删除按钮；
• numIsShow - Boolean - [default:false] - 是否显示数字；
• chooseImages - Function - 选择图片回调；

    bindtap_delete(e){
      /*
       * e 当前显示的图片的下标(双向绑定index，可以忽略e)
       * this.images 存储选择图片传过来的对象
       * this.index 双向绑定当前显示的图片的下标
       * 下面是删除的例子
       */
      this.images = this.images.filter((v,i) => {
        return this.index!=i;
      })
    },

Notice

• 使用方法仅供参考
• /src/App.vue 有简单的例子 demo