這兩天在研究node + koa + koa-formiable 上傳圖片和文件

最簡單的使用方法

const Koa = require('koa')
const app = new Koa()
const formidable = require('koa-formidable')

app.use(formidable({
     uploadDir: config.uploadDir, // 上傳目錄
     keepExtensions: true,  // 保持原有后綴名
 }))


然后在文件中使用

let filePath = ctx.request.files.file.path;
let net_filePath = '/public/files/' + path.parse(filePath).base;

文件已經(jīng)上傳到指定的目錄，非常方便。 但是我們不可能所有文件都上傳到一個文件夾吧。 這時候需要按需自定義上傳路徑

但是koa-formable 的文檔說明少之又少，沒辦法只能硬著頭皮研究， 網(wǎng)上找到一個例子

    // 這個是一個異步,在路由里面前面是有async的
const upkoafile = async (ctx, next) => {
    var fs = require('fs');
    var formidable = require('koa-formidable'); // 這里用koa下的formidable模塊,如果直接套用會出現(xiàn)關(guān)于req.on 的報錯
    // 直接new formidable.IncomingForm() 也會報錯它不能new,或者說下面這句已經(jīng)幫我們new好了
    var form = formidable.parse(ctx.request);
    /*
    這里的form是一個函數(shù),具體如下
    function (done) {
        var form = opts instanceof formidable.IncomingForm
            ? opts
            : new formidable.IncomingForm(opts)
        form.parse(ctx.req, function (err, fields, files) {
            if (err) return done(err)
            done(null, { fields: fields, files: files })
        })
    }
    看到這里,我想有人應(yīng)該明白了,koa-formidable只不過在原來的模塊基礎(chǔ)上加了一點東西,甚至可以不用這個模塊
    var formidable = require('formidable');
    var form = new formidable.IncomingForm();
    form.parse(ctx.req,function(){...})
    */
    var p = new Promise((resolve, reject) => {
        form((opt, obj) => {
            var file = obj.files.file;
            var filename = file.name;
            var buffer = fs.readFileSync(file.path); // 讀取文件,此時就可以上傳了
            //... 到這里就已經(jīng)回到之前的步驟了,后面的http只需要在合適的地方返回promise就行了
            var opts = {
                //...上面一樣
            }
            http.request(opts, function (resp) {
                resp.setEncoding('utf8');
                resp.on('data', function (chunk) {
                    body += chunk;   // 這個是上傳的服務(wù)器返回的結(jié)果
                })
                resp.on('end', function () {
                    try {
                        var result = JSON.parse(body);
                        return resolve(result); //上傳結(jié)束客戶端返回
                    } catch (e) {
                        return reject(e);
                    }
                })
            }).on('error', function (e) {
                return reject(e); //出錯后返回
            }).write(buffer)   // http上次
                .end();
        })
    })
    var body = await p; //上面的promise返回
    return ctx.body = body;
}

看到這里思路清晰了很多，但是我覺得我的需求不需要用到 像上面代碼中的 http 模塊，
于是我嘗試直接使用 formidable 模塊，

    var formidable = require('formidable')
    var form = new formidable.IncomingForm()
    form.uploadDir = uploadPath
    form.keepExtensions = true

    form.parse(ctx.req, function (err, fields, files) {
        console.log('files', files)

    })

這時出現(xiàn)惡心的找不到文件路勁

image.png

但是如果配置修改了的話：

    var formidable = require('formidable')
    var form = new formidable.IncomingForm()
    // form.uploadDir = uploadPath
    // form.keepExtensions = true

    form.parse(ctx.req, function (err, fields, files) {
        console.log('files', files)

    })

文件就會自動上傳到一個莫名其妙的目錄

image.png

結(jié)合上面兩個情況想了很久，發(fā)現(xiàn)一個規(guī)律。 有可能是我指定的上傳的目錄文件沒有新建。 所以就會報沒有找到路徑的錯誤， 但如果沒有設(shè)置 uploadDir 屬性，文件就上傳到默認的路徑了。 最后用fs模塊, 每次上傳圖片之后就新建目錄，然后問題就解決了

    fs.mkdir(uploadPath, function(err) {
        if(err) {
            return console.log(err)
        }
        console.log('創(chuàng)建文件夾成功')
    })

接下來就是異步問題了, 這里詳細記錄我的思考過程，日后反思。

參考文章 https://blog.csdn.net/u011782108/article/details/68062603
但是連接的作者并沒有上傳設(shè)置路徑，所以我跟他的還不太一樣

操作步驟

exports.addCover = async (ctx) => {

    let uploadPath = `${config.uploadDir}/public/files/server/coverimg/${moment().format('YYYYMMDD')}`
    let timeStamp = `${moment().format('YYYY-MM-DD')} ${moment().hours()}:${moment().minutes()}:${moment().seconds()}`

    function isExistFile() {
        return new Promise(function(resolve, reject) {
            fs.exists(uploadPath, function (exists) {
                if (exists) return resolve(true)

                if (!exists) {
                    fs.mkdir(uploadPath, function (err) {
                        if (err) {
                            return reject(false)
                        }
                        resolve(true)
                    })
                }
            })
        })
    }

    // function createFile() {
    //     return new Promise(function(resolve, reject) {
    //         console.log('uploadPath', uploadPath)
    //         fs.mkdir(uploadPath, function (err) {
    //             if (err) {
    //                 reject(err)
    //             }
    //             resolve()
    //         })
    //     }).catch(error => console.log('caught2', error))
    // }

    function cb(err, fields, files) {
        return new Promise((resolve, reject) => {
        
            console.log('files', files)
            let file = files.file;
            let filename = file.name;
            resolve(filename)
        })
    }

    function opeFile() {
        return new Promise(function(resolve, reject) {
            let form = new formidable.IncomingForm()
            form.uploadDir = uploadPath  //上傳路徑
            form.keepExtensions = true   //是否保持拓展名
            form.parse(ctx.req, function (err, fields, files) {
                // resolve('sssss')
                // if(err) return reject(err)

                // console.log('ssssssss')
                // let file = files.file
                // filePath = file.path
                // fileName = file.name
                // console.log(fileName)
                // console.log(filePath)
                // resolve({
                //     code: '001',
                //     msg: '上傳成功',
                //     filePath,
                //     fileName
                // })
            })
        })

    }

    // 如果promise函數(shù)沒有添加 .catch 捕捉錯誤，會彈出提示
    // (node:42811) UnhandledPromiseRejectionWarning: undefined
    // (node: 42811) UnhandledPromiseRejectionWarning: Unhandled promise rejection.This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
    // (node: 42811)[DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated.In the future, promise rejections that are not handled will terminate the Node.js process with a non - zero exit code.
    
    async function handleAsync() {
        try {
            const isExist = await isExistFile()
            console.log('isExist', isExist)


            return isExist
            // if (isExist) {

            //     let form = new formidable.IncomingForm()
            //     form.uploadDir = uploadPath  //上傳路徑
            //     form.keepExtensions = true   //是否保持拓展名

            //     console.log('form', form)
            //     // console.log('uploadPath', uploadPath)
            //     // const v = form.parse(ctx.req, function (err, fields, files) {
            //     //     return 'sssss'
            //     // })

            //     // const v = await cb(formCb)
            //     // console.log('v', v)            
            // } 

        } catch (e) {
            console.log(e)
        }
    }
    const p = await handleAsync()
    
    console.log('p', p)
    ctx.body = p




    // let result = checkFs.then(function(data) {

    //     return opeFile

    // })
    
    // let { filePath, fileName } = result
    // await user_db.sqlQuery('INSERT INTO server_article_addcover (filepath, filename, created_at) values (?,?,?)', [filePath, fileName, timeStamp])
    // ctx.body = result

    // 將數(shù)據(jù)保存進數(shù)據(jù)庫
    // let result = await user_db.sqlQuery('INSERT INTO server_article_addcover (filepath, filename, created_at) values (?,?,?)', [filePath, fileName, timeStamp])

    // return ctx.body = {
    //     code: '001',
    //     msg: '上傳成功',
    //     filepath: filePath.replace(/^\/public/, ''),
    //     filename: fileName
    // }



    // fs.exists(uploadPath, function(exists) {
    //     if (!exists) {
    //         fs.mkdir(uploadPath, function (err) {
    //             if (err) {
    //                 return console.log(err)
    //             }
    //             console.log('創(chuàng)建文件夾成功')
    //         })
    //     }




    //     const formidable = require('formidable')
    //     let filePath, fileName
    //     let form = new formidable.IncomingForm()
    //     form.uploadDir = uploadPath  //上傳路徑
    //     form.keepExtensions = true   //是否保持拓展名


    //     form.parse(ctx.req, async function (err, fields, files) {
    //         let file = files.file
    //         filePath = file.path
    //         fileName = file.name

    //         // 將數(shù)據(jù)保存進數(shù)據(jù)庫
    //         let result = await user_db.sqlQuery('INSERT INTO server_article_addcover (filepath, filename, created_at) values (?,?,?)', [filePath, fileName, timeStamp])

    //         return ctx.body = {
    //             code: '001',
    //             msg: '上傳成功',
    //             filepath: filePath.replace(/^\/public/, ''),
    //             filename: fileName
    //         }
    //     })


    // })


}