当前位置:   article > 正文

vue移动端实现图片预览_关于vue移动端下载图片

关于vue移动端下载图片
接着上文的文件上传、下载、删除继续往下说,我们先说移动端的图片格式预览
  1. 上文说到了vue引用了vant插件,是一个很好用的移动端开发组件,它自带了上传文件的方法,当然也带了图片预览的方法
  2. 图片预览其实跟文件下载有点类似,上文我们说到文件下载请求后台接口,拿到了文件的’blob’,然后通过window.URL.createObjectURL(blob)创建一个文件下载的路径,创建a标签进行下载;图片预览也是拿到文件的’blob’,然后创建一个FileReader对象,使用readAsDataURL()方法来预览图片。
    预览图片代码
<van-image-preview v-model="showPicture" :images="images" :startPosition="startPositionIndex"/>
  • 1
  • 这是vant自带的组件,可以进行图片预览;
  • showPicture控制图片的显示隐藏;
  • images是展示图片的列表;
  • startPositionIndex是展示图片的索引。

获取图片路劲方法

//获取图片路径
async getFile(res) {
 for(let i = 0; i < res.length; i++) {
   //请求接口
   await this.$http.get('/aeo_smart/ICommonApi.do?viewFile_chapter', {
     params: {
       fileid: res[i].id,
       subclassname: res[i].subclassname,
       fid: res[i].id
     },
     responseType: 'blob'
   })
   .then((response) =>{
       let dataInfo = response.data
       let fileHeader = '';
       let typeContent = dataInfo.type;
       //判断类型是否是图片类型
       if(res[i].extend == 'png' || res[i].extend == 'gif' || res[i].extend == 'x-icon' || res[i].extend == 'jpg') {
         fileHeader = "data:image/png;base64,";   //设置base64 的格式
         typeContent = "image/" + res[i].extend;  //设置blob的格式

         // 生成blob图片,需要参数(字节数组, 文件类型)
         let blob = new Blob([dataInfo], { type: typeContent })
		
		//创建FileReader对象
         const reader = new FileReader();
         let url = '';
         
         reader.onload = function (e) {
           //取到文件预览路径
           url = e.target.result
         }
         setTimeout(rese => {
           this.path.push(url);
           //添加到预览的列表中
           this.images.push(url);
           this.iamgeFileName.push(res[i].id);
         }, 500)

         //读取blob对象,获得URL格式的字符串(base64编码)以表示所读取文件的内容
         reader.readAsDataURL(blob);
	     } else {
	        setTimeout(rese => {
	          this.path.push(this.realpath);
	        }, 500)
	     }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

下一篇:vue移动端pdf在线预览,并实现手势缩放、移动

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/612603
推荐阅读
相关标签
  

闽ICP备14008679号