前端UI框架:antd 上传文件;后端egg.js:接收文件并保存

后端代码:(egg.js)

'use strict';
const  fs = require('fs')
var path = require('path'); 

const Controller = require('egg').Controller;

//故名思意 异步二进制 写入流
const awaitWriteStream = require('await-stream-ready').write;
//管道读入一个虫洞。
const sendToWormhole = require('stream-wormhole');
//还有我们这里使用了egg-multipart
const md5 = require('md5');

        const { ctx } = this;
        let stream = await ctx.getFileStream()
        //console.log(stream.fields)
        let user=JSON.parse(stream.fields.user)
        let note=stream.fields.note
        let filename = new Date().getTime() + stream.filename  // stream对象也包含了文件名，大小等基本信息
    
        // 创建文件写入路径
        // let target = path.join('./', `upload/${filename}`)
        const target = path.join(this.config.baseDir, 'app/public/introduction', filename);
        const result = await new Promise((resolve, reject) => {
        // 创建文件写入流
        const remoteFileStrem = fs.createWriteStream(target)
        // 以管道方式写入流
        stream.pipe(remoteFileStrem)

        let errFlag 
        // 监听error事件
        remoteFileStrem.on('error', err => {
            errFlag = true
            // 停止写入
            sendToWormhole(stream)
            remoteFileStrem.destroy()
            //console.log(err)
            reject(err)
        })
        
        // 监听写入完成事件
        remoteFileStrem.on('finish', () => {
            if (errFlag) return
            resolve({ filename, path: target})
        })
        })
        const data={
        filename:result.filename,
        path:result.path
        }
        const _result = await ctx.service.common.introductionUpload({id:user.id,filename:result.filename,filepath:result.path,note:note});
        data['upid']=_result['id']
        data['note']=_result['note']
        ctx.body = { code: 1, message: '上传成功', data: data }

注:前端加了一个随机数,用于上传多个文件,表单数据一致

前端部分代码:(antd)

const _this=this
const props = {
    action: 'http://127.0.0.1:7001/introductionUpload',
	onChange({ file, fileList }) {
		if (file.status !== 'uploading') {
			_this.setState({id:file.response.data.upid?file.response.data.upid:0})
				
		}
     },
     multiple:false
};

<Form.Item label="上传文件" {...formItemLayout} >
	<Upload {...props} accept='.docx' data=                                  
       {{user:JSON.stringify(this.state.user),note:this.state.note}} onRemove= 
       {this.handleRemove}> 
        <Button>
		   <Icon type="upload"/> 上传
	    </Button>
	</Upload>
</Form.Item>