一个简单地图片预览组件vue-img-previewer

github页面

使用方式

1. 安装

yarn add vue-img-previewer

npm i vue-img-previewer --save

2. 然后在要使用的组件里按照下面的类似格式书写

<template>
  <div class="hello">
    <li v-for="(item,index) in imgDataList"
        :key="index">
      <img :src="item.url"
           style="width:300px;height:auto;cursor: zoom-in"
           @click="showViewer(index)"></li>
    <ImgPreview :viewerVisible.sync="viewerVisible"
                :imgDataList.sync="imgDataList"
                :imgIndex.sync="imgIndex"
                ref="ImgPreview"></ImgPreview>

  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import {ImgPreview} from 'vue-img-previewer';

@Component({
  components: {
    ImgPreview,
  },
})
export default class HelloWorld extends Vue {
  public viewerVisible: boolean = false; // 子组件中viewer的可见性
  public imgIndex: number = 100; // 图片的索引
  public imgDataList: any[] = [
    { title: 'secend', url: require('./testImg/261652.jpg'), id: 2 },
    { title: 'third', url: require('./testImg/164F25161-2.jpg'), id: 3 },
    { title: 'four', url: './testImg/596296.jpg', id: 4 },
    { title: 'five', url: require('./testImg/timg.jpg'), id: 5 },
    { title: 'six', url: require('./testImg/245484.jpg'), id: 6 },
  ]; // 得到的img的数据，请务必按照这个格式写
  public showViewer(index: number) {
    this.imgIndex = index;
    setTimeout(() => {
      this.viewerVisible = true;
      (this.$refs.ImgPreview as any).init(this.imgIndex);
    }, 0)
  }
}
</script>

上面为了简单测试，直接用了require，这里可以是从后端拿到的base64数据

图片数据的格式需为
{ title: 'xxx', url: 'xxxxxx.xxx', id: x }

3. 运行

yarn serve

npm run serve

参数

组件简单，注释详细，易于第二次开发

刚学了点ts和vue做了这个组件，主要是vue的组件有点少，我搜索的时候，只看见v-viewer这个封装了 viewer.js的组件和一些功能较少的组件，不易于维护和二次开发，于是我做了这个组件，我是刚入前端的新手，希望各位指点，如果可以献上你的star和fork，小生感激不尽

上传图片组件

简介

上传图片组件也是后台管理系统的最重要的基础组件之一，这里功能支持图片文件类型检验，图片大小检验，图片分辨率校验以及图片比列校验等功能。

主要依赖说明 （先安装，步骤略）

 {
    "element-ui": "2.11.1",  
    "vue": "^2.6.10",
    "vue-router": "^3.0.1"
 }

正文

1.组件

src/components/Upload.vue

<template>
  <div class="custom-upload">
    <input
      :id="id"
      type="file"
      style="display: none"
      name="single"
      accept="image/*"
      @change="onChange"
    />
    <el-button size="small" type="primary" :loading="loading" @click="handleOpenFile">
      <i class="fa fa-upload" />
      添加图片
    </el-button>
    <div v-if="tips" class="tips clear-margin-top">{{ tips }}</div>
  </div>
</template>

<script>
// 上传文件组件
import {
  isAppropriateResolution,
  isAppRatio,
  isImageFile,
  isMaxFileSize
} from '@/utils/upload'    // upload.js 文件见下文

// 定义的接口根据自己项目更换
import { uploadImage } from '@/api/upload'  

import { Message } from 'element-ui'

export default {
  name:'Upload',
  props: {
    // 最大上传文件的大小 单位（MB）
    maxFileSize: {
      type: Number,
      default: 2
    },
    // 提示内容
    tips: {
      type: String
    },
    // 图片文件分辨率的宽度
    width: {
      type: Number,
      width: 460
    },
    // 图片文件分辨率的高度
    height: {
      type: Number,
      default: 300
    },
    // 是否限制分辨率
    isResolution: {
      type: Boolean,
      default: false
    },
    // 是否限制比列
    isRatio: {
      type: Boolean,
      default: false
    },
    // 比列 ag: 1:1 时给 [1,1]
    ratio: {
      type: Array
    }
  },
  data() {
    return {
      id: 'upload-input-' + +new Date(),
      loading: false
    }
  },

  methods: {
    // 打开文件
    handleOpenFile() {
      const input = document.getElementById(this.id)
      // 解决同一个文件不能监听的问题
      input.addEventListener(
        'click',
        function() {
          this.value = ''
        },
        false
      )
      // 点击input
      input.click()
    },

    // 选择好文件
    async onChange($event) {
      this.loading = true
      const file = $event.target.files[0]
      if (!file) {
        this.loading = false
        return Message.error('选择图片失败')
      }

      // 限制为图片文件
      if (!isImageFile(file)) {
        this.loading = false
        return
      }

      // 限制文件上传大小
      if (!isMaxFileSize(file, this.maxFileSize)) {
        this.loading = false
        return
      }

      try {
        // 限制分辨率
        if (this.width !== 0 && this.height !== 0 && this.isResolution) {
          await isAppropriateResolution(file, {
            width: this.width,
            height: this.height
          })
        }

        // 限制比列
        if (this.isRatio && this.ratio && this.ratio.length === 2) {
          await isAppRatio(file, this.ratio)
        }
        // 开始上传
        this.upload(file)
      } catch (error) {
        Message.error(error.message || '上传失败')
        console.log(error)
        this.loading = false
      }
    },

    // 自定义上传
    async upload(file) {
      try {
        const res = await uploadImage(file)
        this.$emit('subUploadSucceed', res)
        Message.success('上传成功')
        this.loading = false
      } catch (error) {
        this.loading = false
        console.log(error)
        Message.error(error.message || '上传失败')
      }
    }
  }
}
</script>

<style lang="scss"  scoped >
.custom-upload {
  .tips {
    margin-top: 10px;
    color: red;
    font-size: 12px;
  }
  .clear-margin-top {
    margin-top: 0;
  }
}
</style>

2.使用

<template>
  <div>
    <app-upload
      tips="请上传720*294的图片"
      :is-resolution="true"
      :width="720"
      :height="294"
      @subUploadSucceed="handleUploadSucceed"
    />
    <img v-if="url" :src="url" class="image-size" />
  </div>
</template>

<script>
import AppUpload from '@/components/Upload'
export default {
  name: 'Banner',
  components: {
    AppUpload
  },
  data() {
    return {
      url: ''
    }
  },
  methods: {
    // 海报上传成功
    handleUploadSucceed(url) {
      this.url = url
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.image-size {
  margin-top: 10px;
  width: 150px;
  height: 92px;
  cursor: pointer;
}
</style>

3.补充src/utils/upload.js 文件

import { Message } from 'element-ui'

/**
 *
 * @param {file} file 源文件
 * @desc 限制为图片文件
 * @retutn 是图片文件返回true否则返回false
 */
export const isImageFile = (file,fileTypes) => {
  const types =fileTypes|| [
    'image/png',
    'image/gif',
    'image/jpeg',
    'image/jpg',
    'image/bmp',
    'image/x-icon'
  ]
  const isImage = types.includes(file.type)
  if (!isImage) {
    Message.error('上传文件非图片格式!')
    return false
  }

  return true
}

/**
 *
 * @param {file} file 源文件
 * @param {number} fileMaxSize  图片限制大小单位（MB）
 * @desc 限制为文件上传大小
 * @retutn 在限制内返回true否则返回false
 */
export const isMaxFileSize = (file, fileMaxSize = 2) => {
  const isMaxSize = file.size / 1024 / 1024 < fileMaxSize
  if (!isMaxSize) {
    Message.error('上传头像图片大小不能超过 ' + fileMaxSize + 'MB!')
    return false
  }
  return true
}

/**
 *
 * @param {file} file 源文件
 * @desc 读取图片文件为base64文件格式
 * @retutn 返回base64文件
 */
export const readFile = file => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = e => {
      const data = e.target.result
      resolve(data)
    }
    reader.onerror = () => {
      const err = new Error('读取图片失败')
      reject(err.message)
    }

    reader.readAsDataURL(file)
  })
}

/**
 *
 * @param {string} src  图片地址
 * @desc 加载真实图片
 * @return 读取成功返回图片真实宽高对象 ag: {width:100,height:100}
 */
export const loadImage = src => {
  return new Promise((resolve, reject) => {
    const image = new Image()
    image.src = src
    image.onload = () => {
      const data = {
        width: image.width,
        height: image.height
      }
      resolve(data)
    }
    image.onerror = () => {
      const err = new Error('加载图片失败')
      reject(err)
    }
  })
}

/**
 *
 * @param {file} file 源文件
 * @param {object} props   文件分辨率的宽和高   ag: props={width:100, height :100}
 * @desc  判断图片文件的分辨率是否在限定范围之内
 * @throw  分辨率不在限定范围之内则抛出异常
 *
 */
export const isAppropriateResolution = async(file, props) => {
  try {
    const { width, height } = props
    const base64 = await readFile(file)
    const image = await loadImage(base64)
    if (image.width !== width || image.height !== height) {
      throw new Error('上传图片的分辨率必须为' + width + '*' + height)
    }
  } catch (error) {
    throw error
  }
}

/**
 *
 * @param {file} file 源文件
 * @param {array} ratio   限制的文件比例 ag:  ratio= [1,1]
 * @desc 判断图片文件的比列是否在限定范围
 * @throw  比例不在限定范围之内则抛出异常
 */
export const isAppRatio = async(file, ratio) => {
  try {
    const [w, h] = ratio
    if (h === 0 || w === 0) {
      const err = '上传图片的比例不能出现0'
      Message.error(err)
      throw new Error(err)
    }
    const base64 = await readFile(file)
    const image = await loadImage(base64)
    if (image.width / image.height !== w / h) {
      throw new Error('上传图片的宽高比例必须为 ' + w + ' : ' + h)
    }
  } catch (error) {
    throw error
  }
}

分享一个适用于后台管理系统、网站等的图片查看器。

demo在线链接: duo-image-viewer

支持以下功能：

1.缩放：

2.旋转

3.拖拽

4.全屏

技术栈：vue

如何使用：

1.安装依赖

npm i duo-image-viewer --save  // cnpm i duo-image-viewer --save

2.引入并注册组件
找到vue项目中的main.js 文件并加入如下代码：

import duoImageViewer from 'duo-image-viewer' // 引入组件
Vue.use(duoImageViewer) // 注册组件

3.在页面中使用

<template>
  <div>
    <button @click="handleOpen">打开查看器</button>
    <duo-image-viewer 
      :src="src" 
      :srcList="srcList" 
      @close="handleClose" 
      :showViewer="showViewer"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: {
        name: '',
        url: "https://baidu.com/pictures/2020-09-08/1599535213868-GDJJZizFVtepBxlXpq.jpg"
      },
      srcList: [
        "https://baidu.com/pictures/2020-09-08/1599535213868-GDJJZizFVtepBxlXpq.jpg",
        "https://baidu.com/pictures/2020-09-08/1599535221238-tQfrTrrwOLSdhtiVBY.jpg",
      ],
      showViewer: false,
    };
  },
  methods: {
    handleOpen() {
      this.showViewer = !this.showViewer
    },
    handleClose() {
      this.showViewer = false
    }
  }
};
</script>

其中showViewer控制显示隐藏，src表示当前展示的图片，srcList表示要展示图片列表

GitHub地址：duofuni/duo-image-viewer