文件上传和处理

*** 不清楚大家对文件处理是什么感觉，反正对于我来说文件上传和后端处理开始算是个噩梦了，所以找了个机会把这个功能搞通了。 ***

前端部分

// 页面组件使用的是elementUI，开启自动上传，不允许多文件上传不显示文件列表
// 由uploadFile接管具体上传时间
<el-upload
  class="upload-demo"
  ref="upload"
  :http-request="uploadFile"
  :multiple="false"
  :auto-upload="true"
  :show-file-list="false"
>
  <el-button slot="trigger" size="small" type="primary">
    导入数据
  </el-button>
</el-upload>
// JavaScript部分
uploadFile(data) {
	// 当前上传的文件会保存在本函数的回调data.file中，将其取出
  let file = data.file; // 此处上传的是file文件即可
  // 新建一个表单向表单追加后端需要接收的文件KEY名即可
  let formData = new FormData();
  formData.append('file', file);
  // 当然这里可以追加其它东西，比如一个ID或者名称或者type等
  // 发送上传请求
  importExcel(formData)
    .then((res) => {
      // 上传后的处理
    })
    .catch(() => {
      // 上传失败处理
    });
}
// API封装，根据项目封装现状改动即可
export async function importExcel(data) {
  const res = await axios.post('/api/admin/importExcel', data);
  // 请求结束后的处理并返回promise
}

后端部分

// 后端使用的是nodejs
importExcel: async (req, res, next) => {
	// 创建一个对象用于从表单中接收数据    formidable需要npm install安装
  const form = new formidable.IncomingForm();
  // 接收表单数据    err：错误   fields：除文件外的表单数据  files：上传的文件列表
  form.parse(req, async (err, fields, files) => {
  	  // 将接收到的数据转成buffer，转成buffer一切就好操作了
    const buffer = await streamToBuffer(fs.createReadStream(files.file.path))
    // 后续对buffer的使用或者转码即可
  }）
}）

// 将stream转buffer
async function streamToBuffer(stream) {
    return new Promise((resolve, reject) => {
        let buffers = [];
        stream.on('error', reject);
        stream.on('data', (data) => buffers.push(data))
        stream.on('end', () => resolve(Buffer.concat(buffers)))
    });
}

Q.E.D.