node上傳圖片到阿里雲oss

參考博客
https://blog.csdn.net/zhuming3834/article/details/77531127?locationNum=6&fps=1

獲取配置參數

首先使用阿里雲上傳圖片需要有阿里雲的對象存儲
然後獲取幾個關鍵配置數據(參考博客裏面有原博主獲取這五個參數的詳細步驟,我就不再多做贅述了)

region: 'oss-cn-shanghai',      
accessKeyId: 'L***************B',
accessKeySecret: 'I********************i',
bucket: 'imagepath',
endPoint: 'oss-cn-shanghai.aliyuncs.com',

有了這五個參數後就是node後臺代碼的實現了
需要用到幾個組件co,multer,ali-oss

安裝依賴

npm i co --save
npm i multer --save
npm i ali-oss --save

安裝完成後的node後臺代碼

var express = require('express');
var router = express.Router();
var fs = require('fs');
// 初始化Client
var co = require('co');
var OSS = require('ali-oss');
var client = new OSS({
  region: 'oss-cn-shanghai',
  accessKeyId: 'L***************B',
  accessKeySecret: 'I********************i'
});

var ali_oss = {
    bucket: 'imagepath',
    endPoint: 'oss-cn-shanghai.aliyuncs.com',
}
// 微信小程序 圖片上傳
var multer  = require('multer')
var upload = multer({ dest: './tmp/' })
// 圖片上傳
router.all('/upload2', upload.single('file'), function(req, res, next){
    // 文件路徑
    var filePath = './' + req.file.path;  
    // 文件類型
    var temp = req.file.originalname.split('.');
    var fileType = temp[temp.length - 1];
    var lastName = '.' + fileType;
    // 構建圖片名
    var fileName = Date.now() + lastName;
    // 圖片重命名
    fs.rename(filePath, fileName, (err) => {
        if (err) {
            res.end(JSON.stringify({status:'102',msg:'文件寫入失敗'}));   
        }else{
            var localFile = './' + fileName;  
            var key = fileName;

            // 阿里雲 上傳文件 
            co(function* () {
              client.useBucket(ali_oss.bucket);
              var result = yield client.put(key, localFile);
              var imageSrc = 'http://image.hgdqdev.cn/' + result.name;
              // 上傳之後刪除本地文件
              fs.unlinkSync(localFile);
              res.end(JSON.stringify({status:'100',msg:'上傳成功',imageUrl:imageSrc})); 
            }).catch(function (err) {
              // 上傳之後刪除本地文件
              fs.unlinkSync(localFile);
              res.end(JSON.stringify({status:'101',msg:'上傳失敗',error:JSON.stringify(err)})); 
            });
        }
    });
})
module.exports = router;

代碼裏面有個域名的設置,這個位置一定要設置爲自己的阿里雲的域名,要不然會導致圖片訪問失敗
在這裏插入圖片描述

前端訪問

<form action="upload2" method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="submit" />
</form>

PS:大部分內容在參考博客裏面原博主都有提到,我只是對後端代碼部分進行了略加豐富

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章