文件上传下载,客户端名称异常处理

文件上传

upload组件中添加自定义方法,beforeUpload进行上传之前的文件处理

beforeUpload(file){
  let formData = new FormData(); // 实例化一个formdata
  formData.append('files',file); // 将文件对象添加到formdata中
  // 接口请求
  axios.post('fileUpload',formData).then(...);
}

解决客户端下载文件中存在%28 %29的文件名称bug
%28 %29这两个字符对应英文字符() 可知是由于客户端对于英文字符的编码,前端处理formData由于它是只读对象

beforeUpload(file){
  let fileName = file.name;  // 获取文件名称
  let tmpName = fileName.replace(/\(/g,'('). replace(/\)/g,')'); // 对于文件名称中英文字符转化为中文
  let tmpFile = new File([file],tmpName,{type:file.type}); // 替换使用新的文件名称 
  let formData = new FormData(); // 实例化一个formdata
  formData.append('files',tmpFile ); // 将文件对象添加到formdata中 
  // 此时打印formdata已经是处理过文件名称对象
  // 接口请求
  axios.post('fileUpload',formData).then(...);
}

文件下载(原文件名称下载)

fileDown(res){
   // res为后端返回的二进制流
   let link = document.createElement('a'); 
   link.href = url; // 返回的url
   link.click();
}

文件下载(支持重命名下载文件名称)

fileDown(res,name){
   // res为后端返回的二进制流
   let tmpName = name;
   let fileName = decodeURIComponent(res.headers['content-dispostion'].split('=')[1]); // 对于响应头返回的文件名进行截取 
   let ext = fileName.substring(fileName.lastIndexOf('.')); // 获取文件后缀
   let url = URL.createObjectURL(new Blob([res.data],{
             type:"application/x-download;charset=UTF-8",
    }));
   let link = document.createElement('a'); 
   link.down = name + ext; // 这里的name可以随意添加
   link.href = url; // 返回的url
   link.click();
}