应用场景:在不访问后台的情况下,点击如下图的文件列表可以下载或直接预览文件。
效果:浏览器能打开的文件都可以直接预览,如果不能打开的则直接下载,如pdf等
实现方法:由于浏览器的保护机制,我们不能直接访问计算机的资源,因此,我们光获取文件的绝对路径时没有用的。在这里我利用的是elment ui上传组件的钩子——on-preview函数中的file参数
此时浏览器的保护机制依然在生效,控制台还是会出现类似于拒绝访问计算机资源等错误。
解决办法:在项目中找到下图文件夹,node_modules->element-ui->packages->upload->src->index.vue文件
找到方法handleStart,将代码修改如下图所示即可
methods: {
handleStart(rawFile) {
rawFile.uid = Date.now() + this.tempIndex++;
let file = {
status: 'ready',
name: rawFile.name,
size: rawFile.size,
percentage: 0,
uid: rawFile.uid,
raw: rawFile
};
if (this.listType === 'picture-card' || this.listType === 'picture' || this.listType === 'text') {
try {
file.url = URL.createObjectURL(rawFile);
} catch (err) {
console.error('[Element Error][Upload]', err);
return;
}
}
this.uploadFiles.push(file);
this.onChange(file, this.uploadFiles);
},