前端文件上传和下载的实现

这里前端项目使用的Vue，这里的操作是点击 +Excel上传 后，立即调用接口编译出上传的内容。

image

文件上传

上传文件需要注意的三点：

1. 验证上传文件的大小、格式
2. 将文件转化为 formdata 格式
3. 接口请求头部改为 multipart/form-data

HTML代码摘要：

<input
  ref="uploadInput"
  @change="uploadFile"
  type="file"
  accept="application/vnd.ms-excel, application/vnd.openxmlformats-    officedocument.spreadsheetml.sheet"
>

JS代码摘要：

export default {
  name: 'BatchUploadModal',
  data() {
    return {
      // 上传文件的文件名
      uploadFileName: '',
      // 上传文件的错误信息提示
      uploadFileErrMsg: '',
      // 文件的最大尺寸
      fileMaxSize: 2 * 1024 * 1024,
      // 文件接受的格式
      fileAcceptType: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    };
  },
  methods: {
    // 上传文件
    uploadFile() {
      // 获取用户信息
      const file = this.getUploadFileInfo();
      // 这里是为了页面显示需要
      this.uploadFileName = `（${file.name}）`;

      // 验证文件是否符合要求
      if (this.validateUploadFile(file)) {
        // 将文件转为formdata格式
        const formData = new FormData();
        // 'file' 为 HTTP POST 里的字段名
        formData.append('file', file);
        // 触发父组件的 getUploadPointFileData 方法
        this.$emit('getUploadPointFileData', formData);
      }
    },
    // 验证文件是否符合要求（文件是否为空，格式是否正确，大小是否合适）
    validateUploadFile(file) {
      if (file.size === 0) {
        this.setUploadFileErrMsg('上传文件不能为空');
        return false;
      }

      if (!this.validateUploadFileType(this.trim(file.type))) {
        this.setUploadFileErrMsg('上传文件格式错误');
        return false;
      }

      if (file.size > this.fileMaxSize) {
        this.setUploadFileErrMsg('上传文件大小超过2M');
        return false;
      }

      return true;
    },
    // 验证文件类型
    validateUploadFileType(curFileType) {
      const fileTypeArray = this.fileAcceptType.split(',');
      let isSuccess = false;
      fileTypeArray.forEach((type) => {
        const curType = this.trim(type);
        if (curType === curFileType) isSuccess = true;
      });

      return isSuccess;
    },
    // 设置上传文件错误提示
    setUploadFileErrMsg(val) {
      this.uploadFileErrMsg = val;
    },
    // 去除掉多余的空格
    trim(str) {
      return str.replace(/(^\s*)|(\s*$)/g, '');
    },
    // 获取用户信息，这里为单文件上传
    getUploadFileInfo() {
      return this.$refs.uploadInput.files[0];
    },
  },

};

父文件

getUploadPointFileData(formData) {
  this.batchUploadDevicePointFile(formData)
    .then((res) => {
      const err = res.data.success ? '' : res.data.msg;
      this.$refs.batchUploadPoint.setUploadFileErrMsg(err);
    })
    .catch((err) => {
      window.console.log('batchUploadDevicePointFile_err:', err);
    });
},

重要：请求需要将请求头部改为 multipart/form-data

// 这里后端提供的批量上传的接口是将批量上传的excel文件转义为代码可见的格式
export const batchUploadDevicePointFile = (file) => {
  instance.defaults.headers.common['Content-Type'] = 'multipart/form-data';
  return instance.post('/api/admin/devicePoint/uploadExcel', file);
};

image

总结

可参考的文章 文件各种上传，离不开的表单

一直在想为什么上传文件一定要用表单的格式，原来是因为后端普遍对表单格式比较支持，换句话说，表单只是为了满足和后端约定的某种数据格式罢了。

不了解FormData 可以参考下面这篇文章：FormData使用方法详解

文件下载

项目中目前用到的下载模板比较简单，直接放在了a标签里，直接获取了放在服务器某处的文件

HTML摘要

<a href="/api/admin/devicePoint/download">下载模板</a>

其他的方法：

参考的文章：js下载后端返回的excel文件，[HTML5] Blob对象

Blob的功能：Blob对象作为一个装填二进制数据的基本对象，其作用也仅仅是一个容器。

// 接口需要传的 params
let params = {};
// 调用后端接口
api.channelDetailExport(params).then((res) => {
  if (res.success) {
    let blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
    const downloadElement = document.createElement('a');
    const href = window.URL.createObjectURL(blob); // 创建下载的链接
    downloadElement.href = href;
    downloadElement.download = 'xxx.xlsx'; // 下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); // 点击下载
    document.body.removeChild(downloadElement); // 下载完成移除元素
    window.URL.revokeObjectURL(href); // 释放掉blob对象
  }
})