背景

近期一个项目由于缺人，我需要负责前后端，在上传图片这个功能上，由于没实现过后端接收并上传至阿里云OSS进行保存的需求，经过网上各种博客的洗礼与寻找，终于完成了从0到1的一步，为了记录一下痛苦的过程以及帮助后人少走弯路，因此写下这篇博客。

前置知识

拥有一台服务器，这里我选用阿里云
安装了 Node 环境（具体操作请自行查看官网文档 https://nodejs.org/zh-cn/download/）

准备好后，那么便开始，争取十分钟拿下！

准备阶段创建Bucket

1. 进入到阿里云平台，进入控制台，点击 `对象存储OSS`

2. 点击 `Bucket列表`，再创建 `Bucket`

3. 然后输入 `Bucket` 名称，选择地域 (地域最好是选择你所使用OSS存储的地方)。

把读写权限设置为公共读，公共读表示谁都可以访问

4. 这样一个OSS存储就创建好了，接下来需要配置 `AccessKey`，把鼠标悬浮在右上角的头像上，点击 `AccessKey` 管理

5. 然后就会弹出安全提示，让我们选择继续使用 `AccessKey`，还是使用子用户 `AccessKey`

我先说说他们的区别：

继续使用 AccessKey，是获得完全权限
子用户 AccessKey，需要我们配置它的权限，比较安全

因此我们选择 开始使用子用户 AccessKey

按照下图填写（登录名称和显示名称建议保持一致）

点击 “确定” 后创建子用户并得到 accessKeyId，和 accessKeySecret，这个非常重要且仅出现一次，要立即记下来，我们后面会用到！

6. 返回后点击`添加权限`，我已经添加过了，请自行添加，见下图

然后我们就可以使用 阿里云 OSS 上传文件了，上传方式有两种：

在阿里云控制台直接上传
使用 OpenAPI 上传，即本篇文章讲的重点（通过 API 来上传）

开发阶段

1. Express代码

先直接上 Express 代码，后文有对应解释
记得在 node app.js 启动 Express 项目前，先 npm 安装依赖

npm install express
npm install body-parser
npm install multer
npm install multer-aliyun-oss

// app.js
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
// OSS 相关
const multer = require('multer')//npm i multer
const MAO = require('multer-aliyun-oss');//npm install --save multer-aliyun-oss

// 允许跨域访问
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", ' 3.2.1');
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

app.use(express.json())
app.use(express.urlencoded({ extended: false }))


const uplod = multer({
  storage: MAO({
       config: {
           region:'oss-cn-shenzhen',
           accessKeyId: '<accessKeyId>',
           accessKeySecret: '<accessKeySecret>',
           bucket: 'bucket'
       },
       destination: 'public/images'
   })
});

app.post('/upload', uplod.single('file'), (req, res) => {
    // 可以自定义返回结果，推荐打印 req.file 查看，再决定如何返回数据给前端
    const file = req.file;
    console.log(file);
    res.send({
        status: '上传成功',
        code: 200,
        url: `https://你的bucket名字.oss-cn-地区.aliyuncs.com/public/images/${file.filename}`
    });
})


app.listen(3002, () => console.log('Example app listening on port 3002!'))

代码解释：

我这里使用到的 SDK 有 multer 以及 multer-aliyun-oss，这两个都可以在 github 上找到
创建 multer-aliyun-oss 实例时，config 填入必要的参数，destination 字段作用为存储到 OSS 中的文件路径，如果不加 destination 字段默认存储到 OSS 根路径，如果加了就存到对应路径，下面代码中我存储的路径为 域名/public/images，如下图：

2. 访问

前端携带图片文件访问该接口就行，我这里给个 demo，使用的是 uView 的 upload 组件

<template>
	<view>
		<u-upload ref="uUpload" :action="action" :auto-upload="true" ></u-upload>
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://服务器域名/upload',
				filesArr: []
			}
		},
		methods: {
			submit() {
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				console.log(files)
			}
		}
	}
</script>

其他知识

如果你觉得 OSS 这域名太丑，想自定义访问图片时的域名，那么可进行自定义域名操作

只不过要求是你必须要有一个自己的域名，可以买 top 的域名，非常便宜

1. 找到添加域名

2. 输入要绑定的域名即可

比如 www.申请的名字.top ，同时勾选上下方的 自动添加 CNAME 记录 即可

3. 使用

然后对上方代码中的 url 稍作更改

app.post('/upload', uplod.single('file'), (req, res) => {
    const file = req.file;
    console.log(file);
    res.send({
        status: '上传成功',
        code: 200,
        url: `https://www.申请的域名名字.top/public/images/${file.filename}`
    });
})