3.1 上传文件

1. 支持的文件类型，这里我限制了14种，如下：

this.attachmentType = strRebuild([
  "txt",
  "xls",
  "xlsx",
  "doc",
  "docx",
  "ppt",
  "pptx",
  "visio",
  "pdf",        
  "jpg",
  "png",
  "jpeg",
  "rar",
  "zip"
])

2. 页面上需要一个上传文件的输入框，这里我使用input，type设置为file;

<template>
  <div>
    <input
      type="file"
      ref="file"
      multiple="multiple"
      @change="handleFileChange"
    />
    <el-button @click="oninput" size="mini" :class="style">添加附件</el-button>
    <div slot="tip" class="el-upload__tip">支持上传 {{ attachmentType }}</div>
  </div>
</template>

3. 当点击按钮【添加附件】时，用$ref触发input事件;

handleFileChange(e) {
  //验证上传文件的类型
  if(this.attachmentType.indexOf(lastSubstring(e.target.files[0].name,'.').toLowerCase()) !== -1) {
    this.attachmentList.push(e.target.files[0]);
  } else {
    this.$message.error("不支持上传该类型的附件")
  }
},
oninput() {
  this.$refs["file"].click();
}

4. 数据提交至后端，使用FormData的方式，还需特别注意的是：请求的后端接口要设置"Content-Type"为 “multipart/form-data”。

//上传文件
uploadAttachment(attachment) { //接受的参数attachment是File类型
  let params = {
    tableName: "ATTACHMENT",
    column: "FILE\_CONTENT",
    data: new FormData()
  };
  params.data.append("\_files", attachment);
  params.data.append("FILE\_NAME", attachment.name);
  params.data.append("FILE\_SIZE", attachment.size);
  params.data.append("MAIL\_ID", uuidv4());
  uploadBlobData(params).then(res => { //uploadBlobData为我的后端请求
    if(res.data.status == 200) {
      this.$message.success("上传附件成功")
    }
  });
},

5. 字符串相关工具类方法：

// 数组根据指定分隔符重组为字符串
export const strRebuild = (arr, split) => {
  if (
    arr === undefined ||
    arr === null ||
    !(arr instanceof Array) ||
    arr.length === 0
  ) {
    return "";
  }
  if (split === undefined || split === null) {
    split = ",";
  }
  var str = "";
  arr.forEach((v, i) => {
    if (i === arr.length - 1) {
      str = str + v;
    } else {
      str = str + v + split;
    }
  });
  return str;
};

// 截取最后一个指定字符后面的字符串
export const lastSubstring = (str, split) => {
  if (
    str === undefined ||
    str === null ||
    split === undefined ||
    split === null
  ) {
    return "";
  }
  return str.substring(str.lastIndexOf(split) + 1);
};

export default {
  strRebuild,
  lastSubstring
};

3.2 下载文件

1. 思路：

   • 向后端发送GET请求获取附件列表；
   • 将Base64形式的二进制文件流转换为Blob格式进行下载；

2. 请求后端获取文件数据，因为上传附件时通过向后端发送POST请求将文件以Blob形式存在了数据库表中，所以向后端发送GET请求获取文件数据；

queryAttachment(mailId) {
  let params = {
    tableName: "ATTACHMENT",
    page: 1,
    sort: "TIME",
    where: "MAIL\_ID,eq,'" + mailId + "'"
  };
  queryData(params).then(res => { //queryData为我的后端请求
    this.attachmentList = res.data.data; //附件列表
  });
}

3. 页面上每个文件后需要一个下载的按钮

<el-row
 v-for="file in attachmentList"
 :key="file.ID"
 >
    <el-col :span="18">{{file.FILE_NAME}}</el-col>
    <el-col :span="6">
      <el-button plain size="mini" @click="downloadFile(file)">下载</el-button>
    </el-col>
</el-row>

4. 下载文件，将Base64形式的二进制文件转换为Blob类型，注意要根据文件类型设置下载Blob时的类型；

downloadFile(file) {
  let fileType = lastSubstring(file.FILE\_NAME, ".");
  let blob = bs64toBlob(
    file.FILE\_CONTENT,


**ES6**

*   列举常用的ES6特性：

*   箭头函数需要注意哪些地方？

*   let、const、var

*   拓展：var方式定义的变量有什么样的bug？

*   Set数据结构

*   拓展：数组去重的方法

*   箭头函数this的指向。

*   手写ES6 class继承。

![](https://img-blog.csdnimg.cn/img_convert/aac1740e50faadb9a6a7a5b97f9ccba8.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**微信小程序**

*   简单描述一下微信小程序的相关文件类型?

*   你是怎么封装微信小程序的数据请求？

*   有哪些参数传值的方法？

*   你使用过哪些方法，来提高微信小程序的应用速度？

*   小程序和原生App哪个好？

*   简述微信小程序原理？

*   分析微信小程序的优劣势

*   怎么解决小程序的异步请求问题？

![](https://img-blog.csdnimg.cn/img_convert/60b1dbe5c76e264468aa993416a9a031.png)