vue移动端实现图片预览

接着上文的文件上传、下载、删除继续往下说，我们先说移动端的图片格式预览

1. 上文说到了vue引用了vant插件，是一个很好用的移动端开发组件，它自带了上传文件的方法，当然也带了图片预览的方法
2. 图片预览其实跟文件下载有点类似，上文我们说到文件下载请求后台接口，拿到了文件的’blob’,然后通过window.URL.createObjectURL(blob)创建一个文件下载的路径，创建a标签进行下载；图片预览也是拿到文件的’blob’，然后创建一个FileReader对象，使用readAsDataURL()方法来预览图片。
   预览图片代码

<van-image-preview v-model="showPicture" :images="images" :startPosition="startPositionIndex"/>

• 这是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);
    });
  }
},

效果

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