el-upload上传文件后跳转页面后再返回已上传文件的回显

在使用<el-upload>上传完文件后，当跳转到其他页面再返回时，已上传的文件由于页面重新刷新是不存在的，如果要让页面重新显示已上传的文件有哪些方法？我想的方法是将文件file转换成Base64保存在sessionStorage中，当再次返回页面时，从mounted()方法中取出保存的Base64，然后将Base64转换成文件，将文件关联到<el-upload>就行了。

整个页面关闭后，就不保存文件了，所以存放在sessionStorage中了，如果要长久保存，则可以将文件存放在localStorage中。

具体步骤：

1. 页面跳转时保存文件

this.uploadFile是要保存的文件，这里只保存了一个文件

if(this.uploadFile!==null){
          this.getBase64(this.uploadFile).then(res=>{
            sessionStorage.setItem('file', res);
            sessionStorage.setItem('fileName', this.uploadFile.name);
          });
        }

将文件转换为Base64

getBase64(file) {
        return new Promise((resolve, reject) => {
          let reader = new FileReader();
          let fileResult = "";
          reader.readAsDataURL(file);
          //开始转
          reader.onload = function() {
            fileResult = reader.result;
          };
          //转 失败
          reader.onerror = function(error) {
            reject(error);
          };
          //转 结束  咱就 resolve 出去
          reader.onloadend = function() {
            resolve(fileResult);
          };
        });
      }

2.再次回到页面时，从sessionStorage中取出文件，回显到控件中

      mounted() {
     
      let fileData = sessionStorage.getItem('file');
      let fileName = sessionStorage.getItem('fileName');

      if(fileData && fileName){
        let file = this.dataURLtoFile(fileData,fileName);
        this.fileList.push(file);
        this.uploadFile = file;
      }
    },

this.dataURLtoFile方法为将Base64转换为file

  dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
  }