关于在vue中如何上传文件以及下载文件

上传文件

 fileLoad() {
        //利用formdata表单对象转换
        //获取到选中的文件
       file = document.querySelector("#file").files[0]; //拿到选择的文件
        //创建formdata对象 并将文件转换为formdata格式
        var formdata = new FormData();
        formdata.append("file", file);
        const config = {
          headers: { "Content-Type": "multipart/form-data" }, //跟后端约定发送的数据类型为form-data类型
        };
        //调用接口上传文件
        axios.post("http://localhost:3030/api/reg", formdata, config).then(
          (res) => {
     		console.log(res)
          },
          (err) => {
            console.log(err);
          }
        );
      },

下载文件

 downLoadFile(fileName){   
        axios({
          url:'http://localhost:3030/api/download',
          method:'get',
          responseType: 'arraybuffer',  //ajax中设置 responseType为arraybuffer类型的数据 ，告诉后端，自己想要什么类型的数据。 设置这个之后无论后台返回给你的是json数据还是二进制数据都会转换为blob类型的数据
          params:{
            fileName  
          }    
        }).then(
          (res) => {
            console.log(res)
            //使用Blob对象将后端返回的blob类型的数据创建一个下载链接
            var b = new Blob([res.data], { type: 'application/vnd.ms-excel' });
            // 根据传入的参数b创建一个指向该参数对象的URL
            var url = URL.createObjectURL(b);
            // 然后我们使用a标签进行下载
           var link = document.createElement('a');
         
            // 设置导出的文件名
           link.download = file.name;
           link.href = url;
           // 点击获取文件
             link.click();


          },
          (err) => {
            console.log(err);
          }
        );
      }