从小白到大神：Express图片上传与阿里云OSS存储

2023-09-29 11:54:03

轻松实现图片上传：使用Express直达阿里云OSS

作为Web开发人员，图片上传是不可避免的任务。而为了图片安全稳定地存储，将其上传到云存储服务，如阿里云OSS，至关重要。但对于初学者来说，这个过程可能令人望而生畏。本文将循序渐进地指导小白们如何通过Express框架将图片上传至阿里云OSS并进行存储。

前期准备

在开始之前，我们需要准备：

Node.js环境
Express框架
阿里云OSS SDK
图片文件

创建Express项目

首先，创建一个Express项目：

npx create-express-app my-app

安装阿里云OSS SDK

然后，安装阿里云OSS SDK：

npm install ali-oss

配置阿里云OSS

在根目录创建一个名为.env的文件，并配置：

ALI_OSS_REGION=your-region
ALI_OSS_ACCESS_KEY_ID=your-access-key-id
ALI_OSS_ACCESS_KEY_SECRET=your-access-key-secret
ALI_OSS_BUCKET=your-bucket-name

实现图片上传

在routes文件夹中新建upload.js文件：

const express = require('express');
const router = express.Router();
const multer = require('multer');
const aliOss = require('ali-oss');

const storage = multer.diskStorage({
  destination: './uploads/',
  filename: (req, file, cb) => cb(null, Date.now() + '-' + file.originalname)
});

const upload = multer({ storage });

const client = new aliOss({
  region: process.env.ALI_OSS_REGION,
  accessKeyId: process.env.ALI_OSS_ACCESS_KEY_ID,
  accessKeySecret: process.env.ALI_OSS_ACCESS_KEY_SECRET,
  bucket: process.env.ALI_OSS_BUCKET
});

router.post('/upload', upload.single('file'), async (req, res) => {
  const file = req.file;
  const result = await client.put(file.filename, file.path);
  res.json({
    code: 0,
    message: '上传成功',
    data: {
      url: result.url
    }
  });
});

module.exports = router;