使用阿里云OSS云存储上传文件
使用阿里云OSS云存储上传文件
进入到阿里云平台，进入控制台，点击对象存储OSS
点击Bucket列表，再创建Bucket
然后输入Bucket名称，选择地域 (地域最好是选择你所使用OSS存储的地方)。
把读写权限设置为公共读，公共读表示谁都可以访问
这样一个OSS存储就创建好了，接下来需要配置AccessKey，把鼠标悬浮在右上角的头像上，点击AccessKey管理
然后就会弹出安全提示，让我们选择继续使用AccessKey，还是使用子用户AccessKey
我先说说他们的区别：
继续使用AccessKey，是获得完全权限
子用户AccessKey，需要我们配置它的权限，比较安全
继续使用AccessKey，进去后，点击创建AccessKey，进行验证后会得到accessKeyId，和 accessKeySecret，记下来，我们后面会用到！
开始使用子用户AccessKey，按照下图填写
创建好后，会出现创建成功的界面，注意保存accessKeyId，accessKeySecret，返回后accessKeySecret就看不见了
返回后点击添加权限，我已经添加过了，请自行添加，见下图
然后我们就可以使用阿里云OSS云存储上传文件了（也可以拖动文件直接上传，这里就不讲了）
访问这个网址https://www.npmjs.com/package/multer-aliyun-oss，按照提示完成，先npm安装
下面代码是后端代码
const express = require("express")
const app = express()
const multer = require('multer')
const MAO = require('multer-aliyun-oss')
const upload = multer({
storage: MAO({
config: {
region:'oss-cn-hangzhou',
accessKeyId: 'LTAI5fdasftpqR',
accessKeySecret: 'UYhLvnePvq8',
bucket: 'my-demos'
}
})
})
app.post('http://localhost:3000/upload', upload.single('file'), async (req, res) => {
const file = req.file
res.send(file)
})
AI写代码图片中划线的就是region和bucket所需要填写的值
这里是vue单文件组件
这是前端页面上传文件到OSS的代码，我借助了Element UI，使用了el-upload逐渐，代码如下
<el-upload
class="avatar-uploader"
action="http://localhost:3000/upload"
:on-success='res => $set(model, "avatar", res.url)'
>
<img v-if="model.icon" :src="model.icon" >
</el-upload>
AI写代码action: 文件上传的路径
on-success: 文件上传成功的回调，这里的意思是res.url赋值给 model.avatar
data () {
return {
model: {
avatar: ''
}
}
}
AI写代码这样就实现了上传文件到阿里云OSS云存储上