element ui 上传组件实现上传文件前台预览（下载）功能

 

应用场景：在不访问后台的情况下，点击如下图的文件列表可以下载或直接预览文件。

效果：浏览器能打开的文件都可以直接预览，如果不能打开的则直接下载，如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);
    },