当前位置:编程学习 > > 正文

vue实现图片上传数据库(vue.js根据图片url进行图片下载)

时间:2021-10-21 07:29:07类别:编程学习

vue实现图片上传数据库

vue.js根据图片url进行图片下载

最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果,都是跳到一个新的图片网页,后来经过一番琢磨,终于解决了这个问题:

这是后台返回来的json数据(防止泄露重要信息IP地址打码了):

vue实现图片上传数据库(vue.js根据图片url进行图片下载)

我在html里的引用是这样的:

  • <a @click="downCom" >
                    下载执照
                    <i class="icon-down"></i>
                  </a>
    
  • vue.js方法里的下载图片方法:

  • downCom() {
          let that = this;
          this.$http.files().then(res => {
            let hreLocal="";
            hreLocal = res.data.data.url;
            this.downloadByBlob(hreLocal,"pic")
    
          });
        },
    
  • 下面这个方法,可以直接拿去用,直接把你的图片url传给这个方法,就可以实现vue.js来下载图片了。

  • downloadByBlob(url,name) {
        let image = new Image()
        image.setAttribute('crossOrigin', 'anonymous')
        image.src = url
        image.onload = () => {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          let ctx = canvas.getContext('2d')
          ctx.drawImage(image, 0, 0, image.width, image.height)
          canvas.toBlob((blob) => {
            let url = URL.createObjectURL(blob)
            download(url,name)
            // 用完释放URL对象
            URL.revokeObjectURL(url)
          })
        }
      },
    
  • 调用的download(url,name)方法:

  • function download(href, name) {
      let eleLink = document.createElement('a')
      eleLink.download = name
      eleLink.href = href
      eleLink.click()
      eleLink.remove()
    }
    
  • 完成上面的代码后,即可实现图片下载,而不是图片浏览啦。

    最后成功实现点击即可下载图片,效果图如下:

    vue实现图片上传数据库(vue.js根据图片url进行图片下载)

    到此这篇关于vue.js根据图片url进行图片下载的文章就介绍到这了,更多相关vue.js图片url进行图片下载内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!

    上一篇下一篇

    猜您喜欢

    热门推荐