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

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

上传文件

 fileLoad() {
        //利用formdata表单对象转换
        //获取到选中的文件
       file = document.querySelector("#file").files[0]; //拿到选择的文件
        //创建formdata对象 将文件存储在formdata对象中
        var formdata = new FormData();
        formdata.append("file", file);
		//由于我们传formdata数据会占用整个传参对象，详情请看下面axios传参方式
		//但是有时候需求还需要传其他的参数怎么办呢，我们可以将其他参数继续append进formdata对象中
		//例如我们额外传一个参数test，值为测试
		formdata.append('test','测试')
		//这样我们formdata对象中就有两个字段 一个字段file 值对应的是文件对象，一个字段test 值对应的是测试
		//只要formdata传送给后端，那么文件对象和测试 这两个值都会一起携带过去传给后端，后端会有中间件或者插件，解析formdata对象中的file文件对象将其单独拿出来，其他字段也可以单独提炼出来
		//其实你可以想象formdata就是一个普通存放数据的对象{file:文件对象,test:'测试'}里面有一个属性对应文件对象，一个属性对应测试。然后将这个对象传给后端。后端负责从这个对象识别文件对象并获取。当然真实formdata并不是这种结构这里只是方便理解。因为我们传文件不能使用普通的对象传过去，只能将其放在formdata对象中传过去。
		 
        const config = {
          headers: { "Content-Type": "multipart/form-data" }, //跟后端约定发送的数据类型为form-data对象类型
        };
        //调用接口上传文件
         axios({
          url:'http://localhost:3030/api/reg',
          method:'post',
          data:formdata, //我们传formdata会占用整个传参对象
          headers:config.headers 
        }).then(res=>{
          console.log(res)
        })
      },

下载文件

 downLoadFile(fileName){   
        axios({
          url:'http://localhost:3030/api/download',
          method:'get',
          responseType: 'arraybuffer',  	
          /*
	当将responseType设置为一个指定类型时，你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。那么如果两者类型不兼容呢?恭喜你，你会发现服务器返回的数据变成了null，即使服务器返回了数据。
	通俗来说，如果你resoinseType设置的是JSON，就会将后端穿过来的数据尝试转换为Json格式，如果转换不了那就会强制转换成null。
	我们下载文件一般设置responseType为blob或者arraybuffer都可以，为什么呢，一般下载文件掉后台接口，一般后台返回都是二进制数据。而blob和arraybuffer都是二进制数据的一种，所以当我们设置responseType为blob时，请求到后台返回的二进制数据后就会将该二进制数据转换为blob类型的二进制数据。设置responseType为arraybuffer是一样的道理
	当然如果你不安规矩来，瞎几把乱搞，比如后台穿的是一个对象类型的数据例如{name:'xq'}，我们知道对象是可以转成Json的，但是如果你response不是设置的Json，而是设置的arraybuffer或者blob，那么请求到数据时就会尝试将对象类型的数据转换为arraybuffer或者blob类型的二进制数据。这很明显是转不了的，这不就乱套了嘛，所以这个时候就会直接返回一个null空数据。
	*/
          params:{
            fileName  
          }    
        }).then(
          (res) => {
            console.log(res)
            //使用Blob对象将后端返回的Arraybuffer格式得数据转成blob类型的数据 window.URL.createObjectURL(blob)可以把一个blob转成blobURL，用作图片显示，文件下载（不能再服务器上存储，只能在浏览器使用）
            var b = new Blob([res.data], { type: 'application/vnd.ms-excel' });
            // 使用URL对象将blob类型的数据生成一个在线下载的链接
            var url = URL.createObjectURL(b);
            // 然后我们使用a标签进行下载
           var link = document.createElement('a');
         
            // 设置导出的文件名
           link.download = file.name;
           link.href = url;
           // 点击获取文件
             link.click();


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