接着上文的文件上传、下载、删除继续往下说,我们先说移动端的图片格式预览
- 上文说到了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.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);
});
}
},
效果