接着上文的文件上传、下载、删除继续往下说，我们先说移动端的图片格式预览
上文说到了vue引用了vant插件，是一个很好用的移动端开发组件，它自带了上传文件的方法，当然也带了图片预览的方法图片预览其实跟文件下载有点类似，上文我们说到文件下载请求后台接口，拿到了文件的’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.datalet 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在线预览，并实现手势缩放、移动
