问题：用户上传文件，文件首先是上传到缓存，确然提交之后传给后端，同时要即时回显文件信息，可以预览图片和下载文档

注意点：

  1. 首先是上传到缓存之后也是会立即显示到当前上传界面
  2. 其次是当前上传文件的界面的文件，文件的图标是动态加载的
  3. 然后图片文件可以预览，其他文件点击可以下载
  4. 提交之后再次打开要能够回显

技巧：点击链接预览图片的时候，可以用Url打开新的页面

思路：

首先是第一步将文件通过接口上传到缓存，这一步要用new FormData()将数据处理过再上传

然后拿到接口返回给我们的文件名字，url，我们通过文件的名字，利用map得到文件的类型，再将文件名，url，文件类型存储到变量中

接着因为要即时回显文件信息，因此要在el-image中通过对文件类型判断动态加载本地的图片，要用require配合文件中夹杂类型名字，然后图片下面显示文件的名字，同时给上url方便图片预览和文件下载。

提交的时候附上文件信息的数组就可

再次打开的时候，直接加载文件信息的数组，动态加载

做法：

  1. 首先采用的是el的上传文件组件，上面是el-image加载图标，下面是el-upload上传文件
  2. 现在要处理文件上传到缓存的操作， handlechange来处理如何传到缓存
<el-upload

              class="avatar-uploader"

              ref="upload"

              :show-file-list="false"          action="#"

              :on-change="handleChange"

              :auto-upload="false"

            >

              <i class="el-icon-plus avatar-uploader-icon"></i>

            </el-upload>

接下来要详细说明如何上传文件拿到缓存

我们会把文件数据利用new FormData()传给后端接口，然后拿到回传的文件名字和urL，再通过文件的名字来进行类型判定，这里要用Map来进行判断类型，最后得到我们要提交时的3个参数，文件类型，文件名字，文件url。

// 上传文件

    handleChange(file, fileList) {

      const form = new FormData();

      form.append("file", file.raw);

      uploadIcon(form).then((res) => {

        if (res) {

          this.$message({

            message: "上传成功",

            type: "success",

          });

          let type = res.name.split(".")[1]

          //这里需要对type进行限制加工

          let format = 'jpg=image,jpeg=image,bmp=image,webp=image,png=image,gif=image,doc=word,docx=word,xls=excel,xlsx=excel,ppt=ppt,pptx=ppt,pdf=pdf'

          const myMap = new Map(format.split(',').map(entry => {

            const [key, value] = entry.split('=');

            return [key, value];

          }));

          type = myMap.get(type)

          if(type == undefined){

            type = 'default'

          }

          this.signInForm.push({

            "format": type,

            "name": res.name,

            "url": res.url

          })

        } else {

          this.$message.error("上传失败");

        }

      });

    },

然后需要动态为不同类型的文件加载图标，文件名

:src="require('@/assets/icon/'+item.format+'.jpg')"

    //上面是加载图标，下面是预览照片

:preview-src-list="[item.url]"

需要解决下载问题，给图标下面添加点击函数

<div @click="handlePreview(item.name,item.url)">{{item.name}}</div>

需要给文件的名字和url来进行下载。

下载函数如下

handlePreview(name, url){

        var link = document.createElement("a"); //定义一个a标签

        link.download = name; //下载后的文件名称

        link.href = url;

        link.click(); //模拟在按钮上实现一次鼠标点击

        window.URL.revokeObjectURL(link.href);

    },