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

最新推荐文章于 2024-09-02 09:07:25 发布

boJIke

最新推荐文章于 2024-09-02 09:07:25 发布

阅读量3.9k

点赞数

分类专栏： vue 前端文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/bojikeqian/article/details/120670872

版权

前端同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

本文详细介绍了基于Vue的图片上传和预览插件vue-image-upload-preview的使用方法，包括安装、引入组件、组件注册、属性配置、事件监听等。示例代码展示了如何实现图片上传、预览、删除功能，并提供了组件的多个关键属性和回调函数的说明。

摘要由CSDN通过智能技术生成

https://www.iqiyi.com/v_19rz6j9v50.html

vue-image-upload-preview
项目地址：github

基于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;
      })
    },