手把手教你从0到1通过 Express 完成图片上传并保存至阿里云OSS功能(附详细源码)

最新推荐文章于 2024-04-25 17:53:36 发布

Smoothzjc

最新推荐文章于 2024-04-25 17:53:36 发布

阅读量1.6k

点赞数 4

分类专栏：服务器文章标签：前端服务器后端 Express

本文链接：https://blog.csdn.net/weixin_53893220/article/details/128567519

版权

服务器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

🧨 大家好，我是 Smooth，一名大三的 SCAU 前端er
🙌 如文章有误，恳请评论区指正，谢谢！
❤ 写作不易，「点赞」+「收藏」+「转发」谢谢支持！

背景

近期一个项目由于缺人，我需要负责前后端，在上传图片这个功能上，由于没实现过后端接收并上传至阿里云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}`
    });
})

最后

在上传到的阿里云 OSS 位置，点开该图片，如下图一样，在 自有域名 一栏，勾选上自有域名

当然，你也可以选择在图片上传成功后同时向数据库写入对应的图片 URL 来存储起路径

最后

我是 Smoothzjc，致力于产出更多且不仅限于前端方面的优质文章

大家也可以关注我的公众号 @ Smooth前端成长记录，及时通过移动端获取到最新文章消息！

写作不易，「点赞」+「收藏」+「转发」 谢谢支持❤

《都2022年了还不考虑来学React Hook吗？6k字带你从入门到吃透》

《一份不可多得的 Webpack 学习指南（1万字长文带你入门 Webpack 并掌握常用的进阶配置）》

《通过 React15 ~ 17 的优化迭代来简单聊聊 Fiber》

《【offer 收割机之面试必备】一篇非常全面的从 URL 输入到页面展现的全过程精华梳理》

《【offer 收割机之手写系列】10分钟带你掌握原理并手写防抖与节流的立即/非立即执行版本》

《【offer 收割机之 CSS 回顾系列】请你解释一下什么是 BFC ？他的应用场景有哪些？》

《Github + hexo 实现自己的个人博客、配置主题（超详细）》

《10分钟让你彻底理解如何配置子域名来部署多个项目》

《一文理解配置伪静态解决部署项目刷新页面404问题

《带你3分钟掌握常见的水平垂直居中面试题》

《【建议收藏】长达万字的git常用指令总结！！！适合小白及在工作中想要对git基本指令有所了解的人群》

《浅谈javascript的原型和原型链(新手懵懂想学会原型链？看这篇文章就足够啦！！！)》

Smoothzjc

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
手把手教你从0到1通过 Express 完成图片上传并保存至阿里云OSS功能(附详细源码)

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

扫一扫