文件的上传和下载

最新推荐文章于 2025-08-13 22:02:11 发布

转载最新推荐文章于 2025-08-13 22:02:11 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a4b6f38f265da43305ed6a4

文章标签：

#后端

本文介绍了一种实现文件上传和下载的方法，包括如何通过前端验证文件类型和大小，利用FormData对象上传文件到服务器，以及两种从服务器下载文件的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、文件的上传

获得上传的文件

getFile(e) {
    this.file = e.target.files[0];
    var formData = new FormData();
        formData.append('file', this.file); // 此处根据后端所需要的字段名称添加参数
        formData.append('filename', this.file.name);
}
复制代码

对上传文件的大小格式做判断

judgeType(file) { 
    let regExp = /.+\.xlsx/; // 此处限制文件的格式为xlsx
    let isPass = regExp.test(file.name);
    if(!isPass) {
      alert('上传文件的类型必须是xlsx');
      return false;
    }
    else {
      return true;
    }
},
judgeSize(file) {
    let maxSize = 5 * 1024 * 1024;
    if(maxSize > file.size) {
      // 对换算后的结果取整，可有多种方法    
      alert('文件过大，请选择不大于'+ (maxSize/1024/1024).toString().split('.')[0] +'M的文件');
      return false;
    }
    else {
      return true;
    }
},
复制代码

注意要点

要注意上传文件之后需要重置file对象，否则上传相同文件会无法触发change事件。详细代码如下：

html代码

<input 
  type="file"
  @change="getFile($event)"
  style="display:none"
>

<button @click="selectFile">选择上传文件</button>
复制代码

js代码

selectFile() {
  this.$els.input.click();
},
getFile(e) {
  this.file = e.target.files[0];
  if(this.judgeType(this.file) && this.judgeSize(this.file)){
  	this.upload(this.file);
  }
},
judgeType(file) { 
  let regExp = /.+\.xlsx/; // 此处限制文件的格式为xlsx
  let isPass = regExp.test(file.name);
  if(!isPass) {
  	alert('上传文件的类型必须是xlsx');
    return false;
  }
  else {
  	return true;
  }
},
judgeSize(file) {
  let maxSize = 5 * 1024 * 1024;
  if(maxSize > file.size) {
    alert('文件过大，请选择不大于'+ (maxSize/1024/1024).toString().split('.')[0] +'M的文件');
    return false;
  }
  else {
  	return true;
  }
},
upload(file) {
  var formData = new FormData();
  formData.append('file', this.file); // 此处根据后端所需要的字段名称添加参数
  formData.append('filename', this.file.name);
  this.$http.post('/api/upload/', formData)
    .then((res) => {
        // success
       this.file = null; // 上传成功后记得重置文件，否则重新上传相同文件不会触发change
    }, (err) => {
    	// fail
    })
}
复制代码

二、文件的下载

1、用blob生成下载文件并自动进行下载，后端返回的是二进制流数据（注意此法不能用于xlxs格式，若是xlxs可直接使用第二种）。

getResult() {
    // ...
    this.$http.post('/api/download/', {filename: this.file.name})
        .then((res) => {
                this.createDownloadFile(this.file.name, res.data.result);
            }, (err) => {
                //     
            }
        });
},
createDownloadFile(fileName, content) {
    var blob = new Blob([content], {type: 'application/vnd.ms-excel'});
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
    } else {
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(link.href);
    }
}
复制代码

2、直接用get请求接口链接，直接当成下载链接使用

var link = document.createElement('a');
link.href = '/api/download/?filename=' + this.file.name;
link.download = this.file.name;
link.innerHTML = this.file.name;
link.click();
复制代码

转载于:https://juejin.im/post/5a4b6f38f265da43305ed6a4