egg(52)--rbac之单文件和多文件上传

单文件

1. 只支持上传一个文件。
2. 上传文件必须在所有其他的 fields 后面，否则在拿到文件流时可能还获取不到 fields
3. await pump(stream, writeStream); //写入并销毁当前流 (egg demo提供的)

前端

view

app/view/admin/focus/singleUpload.html

                        <form action="/admin/focus/doSingleUpload?_csrf=<%=csrf%>" method="post" enctype="multipart/form-data">
                            <ul>
                                <li> 图片名称: <input type="text" name="title" /></li>
                                <li> 文件: <input type="file" name="pic" /></li>
                                <li>
                                    图片描述:
                                    <textarea name="description" id="" cols="60" rows="8"></textarea>
                                </li>
                                <li>
                                    <br />
                                    <button type="submit" class="btn btn-primary">提交</button>
                                </li>
                            </ul>
                        </form>

后台

router.js

  router.get('/admin/focus/singleUpload', controller.admin.focus.singleUpload); 
  router.post('/admin/focus/doSingleUpload', controller.admin.focus.doSingleUpload);  

controuler

app/controller/admin/focus.js

    async doSingleUpload() {
        const stream = await this.ctx.getFileStream(); //获取表单提交的数据
        if (!stream.filename) { //注意如果没有传入图片直接返回   
            return;
        }
        // console.log(JSON.stringify(stream))
        // 上传目录
        // "filename":"c:/images/291051166-5b20eca6448e8_articlex.png",  path.basename  => 291051166-5b20eca6448e8_articlex.png
        const target = 'app/public/admin/upload/' + path.basename(stream.filename);

        const writeStream = fs.createWriteStream(target);
        await pump(stream, writeStream); //stream.pipe(writeStream);   //可以用， 但是不建议,因为不能处理失败的情况
        this.ctx.body = {
            url: target,
            fields: stream.fields //表单的其他数据
        }
    }

效果

多文件

1. { autoFields: true }:可以将除了文件的其它字段提取到 parts 的 filed 中

前端

view

app/view/admin/focus/multi.html

                        <form action="/admin/focus/doMultiUpload?_csrf=<%=csrf%>" method="post" enctype="multipart/form-data">
                            <ul>
                                <li>  图片名称: <input type="text" name="title"/></li>
                                <li>  图片1: <input type="file" name="face"/></li>
                                <li>  图片2: <input type="file" name="pic2"/></li>
                                <li>
                                    图片描述:
                                    <textarea name="description" id="" cols="60" rows="8"></textarea>
                                </li>
                                <li>
                                    <br/>
                                    <button type="submit" class="btn btn-primary">提交</button>
                                </li>
                            </ul>
                        </form>

后台

router.js

  router.get('/admin/focus/multi', controller.admin.focus.multi);
  router.post('/admin/focus/doMultiUpload', controller.admin.focus.doMultiUpload);  

controller

app/controller/admin/focus.js

    async doMultiUpload() {
        //{ autoFields: true }:可以将除了文件的其它字段提取到 parts 的 filed 中
        //多个图片/文件
        const parts = this.ctx.multipart({
            autoFields: true
        });
        const files = [];
        let stream;
        while ((stream = await parts()) != null) {
            if (!stream.filename) { //注意如果没有传入图片直接返回   
                return;
            }
            const fieldname = stream.fieldname; //file表单的名字  face
            const target = 'app/public/admin/upload/' + path.basename(stream.filename);
            const writeStream = fs.createWriteStream(target);
            await pump(stream, writeStream); //写入并销毁当前流   (egg  demo提供的)

            files.push({
                [fieldname]: target //es6里面的属性名表达式
            });
        }
        this.ctx.body = {
            files: files,
            fields: parts.field // 所有表单字段都能通过 `parts.fields`            放在while循环后面
        };
    }

效果