[VUE | UI组件] 图片预览

效果图

 

依赖

1. 使用 element-ui 中的 icon (可自行修改)

2. file-saver.js

 

功能

支持拖拽、放大缩小、上一张、下一张、点击百分比复位。

 

代码

file.js:

import FileSaver from 'file-saver'

export function download(url, name) {
  const xhr = new XMLHttpRequest()
  url = url.replace('http:', '')
  xhr.open('GET', url, true)
  xhr.responseType = 'blob'
  xhr.onload = () => {
    if (xhr.status === 200) {
      // 将图片文件用浏览器中下载
      FileSaver.saveAs(xhr.response, name)
      // 将图片信息放到Img中
      console.log(window.URL.createObjectURL(xhr.response))
    }
  }
  xhr.send()
}

页面代码：