nodejs 设置axios版本

转载

mob64ca140530fb 2025-01-06 19:57:19

文章标签 nodejs 设置axios版本阿里云 OSS node.js 上传 文章分类 iOS 移动开发

前言

之前做的《微信小程序开发(二)图片上传》和《Node.js+express+MySQL使用七牛云实现的用户头像修改》，使用的都是七牛云的对象云储存服务。这次公司使用另外一套系统，别人要求使用阿里云的服务，所以就研究一些阿里云的OSS，发现我的阿里云里面是有OSS的，所以就写了一些玩了一下。

使用步骤

新建bucket

首先登陆阿里云，进入控制台，对象存储OSS。

nodejs 设置axios版本_阿里云

获取密匙

nodejs 设置axios版本_OSS_02

nodejs 设置axios版本_上传_03

获取服务区域

这里给大家一个阿里云的链接访问域名和数据中心。

我的是华东2

nodejs 设置axios版本_上传_04

后端代码实现

看文档

由于我的后端语言是Node.js，所以我看的是这个部分的：快速开始-NodeJS。

安装SDK

这里阿里云有案例的安装方式，这里我写的是我的方式。
1.去npm(https://www.npmjs.com/)，网站搜索ali-oss；
2.在package.json文件的dependencies下添加"ali-oss": "^4.10.0"；
3.cd到项目目录下，执行npm install；
4.由于SDK基于ES6开发，使用了Generator Function使得用户能够方便地用同步的方式异步的代码，需要配合co使用。具体可参考这篇博客。使用同步方式还需要安装co。这里方式同上。

代码实现

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表单的上传。

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

这里大家可以直接使用我的接口测试。

扩展

在Ajax实现图片上传,这里做的是前端把图片转出base64数据，通过ajax上传。

后端代码实现

// 图片上传
router.post('/upload', function(req, res, next){
    // 图片数据流
    var imgData = req.body.imgData;
    // 构建图片名
    var fileName = Date.now() + '.png';
    // 构建图片路径
    var filePath = './tmp/' + fileName;
    //过滤data:URL
    var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
    var dataBuffer = new Buffer(base64Data, 'base64');
    fs.writeFile(filePath, dataBuffer, function(err) {
        if(err){
          res.end(JSON.stringify({status:'102',msg:'文件写入失败'})); 
        }else{

                var localFile = filePath;
            var key = fileName;
            // 阿里云 上传文件 
            co(function* () {
              client.useBucket(ali_oss.bucket);
              var result = yield client.put(key, filePath);
              var imageSrc = 'http://image.hgdqdev.cn/' + result.name;
              res.end(JSON.stringify({status:'100',msg:'上传成功',imageUrl:imageSrc})); 
            }).catch(function (err) {
              res.end(JSON.stringify({status:'101',msg:'上传失败',error:JSON.stringify(err)})); 
            });
           // 上传之后删除本地文件
           fs.unlinkSync(filePath);
        }
    });
})