node實現上傳圖片功能

1.上傳圖片的功能點

• 基礎功能：上傳圖片、生成圖片連接
• 附加功能：限制上傳圖片的大小與類型、生成高中低三種分辨率的圖片鏈接、生成CDN。

2.技術方案

• 阿里雲OSS等服務器（花錢）
• 直接上傳服務器（不穩定，可以學習時使用）

3.之前獲取body我們使用的是koa-bodyparser，但這個不能獲取文件信息，此時可以卸載koa-bodyparser。安裝koa-body。

使用如下，在入口文件引入並注冊：

const Koa = require('koa');
//const bodyparser = require('koa-bodyparser');
const koaBody = require('koa-body'); const parameter = require('koa-parameter');
const mongoose = require('mongoose');
const app = new Koa();
const error = require('koa-json-error');
const routing = require('./routes');
const { connectionStr } = require('./config');
const path = require('path');

mongoose.connect(connectionStr,{ useUnifiedTopology: true,useNewUrlParser: true },()=>{
    console.log('MongoDB 連接成功了！')
})
mongoose.connection.on('error',console.error)//監聽mongo錯誤信息

app.use(error());
//app.use(bodyparser());
app.use(koaBody({ multipart:true,  //設置true表示支持文件
 formidable:{ uploadDir: path.join(__dirname,'/public/uploads'), //設置圖片上傳的目錄
        keepExtensions: true //圖片上傳后不改變擴展名
 } }))
app.use(parameter(app));
routing(app);





app.listen(3000,()=>{
    console.log("項目已啟動")
})

插件注冊好之后，我們就可以寫接口了，在router里照常寫。controller獲取這樣做：

class HomeCtl {
    index(ctx){
        ctx.body = "這是主頁！"
    }

    upload(ctx){
        const file = ctx.request.files.file;//獲取文件路徑
        ctx.body = {
            path:file.path
        }
    }
}

module.exports = new HomeCtl()

此時接口就寫好了。我們可以zaipostman中進行請求：

 

 

 

 此時返回的是圖片路徑，我們需要的是url，我們要借助一個插件,koa-static:同樣把插件引入並注冊到入口文件：

const Koa = require('koa');
//const bodyparser = require('koa-bodyparser');
const koaBody = require('koa-body');
const parameter = require('koa-parameter');
const koaStatic = require('koa-static'); const mongoose = require('mongoose');
const app = new Koa();
const error = require('koa-json-error');
const routing = require('./routes');
const { connectionStr } = require('./config');
const path = require('path');

mongoose.connect(connectionStr,{ useUnifiedTopology: true,useNewUrlParser: true },()=>{
    console.log('MongoDB 連接成功了！')
})
mongoose.connection.on('error',console.error)//監聽mongo錯誤信息
 app.use(koaStatic(path.join(__dirname,'public'))); //這個public以下的路徑就是生成的url。
app.use(error());
//app.use(bodyparser());
app.use(koaBody({
    multipart:true,  //設置true表示支持文件
    formidable:{
        uploadDir: path.join(__dirname,'/public/uploads'), //設置圖片上傳的目錄
        keepExtensions: true //圖片上傳后不改變擴展名
    }
}))
app.use(parameter(app));
routing(app);





app.listen(3000,()=>{
    console.log("項目已啟動")
})

寫好后，就可以在瀏覽器訪問圖片目錄：訪問時，URL格式是“域名+上面配置的public下層的路徑”

 

 

 

 

 

 這時我們去controller中修改一下路徑即可：

const path = require('path');
class HomeCtl {
    index(ctx){
        ctx.body = "這是主頁！"
    }

    upload(ctx){
        const file = ctx.request.files.file;
        const basename = path.basename(file.path); //獲取圖片名稱（basename） ctx.body = { url:`${ctx.origin}/uploads/${basename}` //ctx.origin是域名 }
    }
}

module.exports = new HomeCtl()