一、阿里云设置：
-
开通阿里云服务和向后台人员要登陆账号这里就不过多介绍了。
-
登录阿里云后台后进入控制台页面，在后台的管理系统对象存储oss里新创建一个Bucket，创建完成后，accessKeyId和accessKeySecret即时保存下来，因为在后面的oss配置需要用到。
image.png
-
在后台管理系统中进入访问控制
image.png
-
点击用户->新建用户->填写相关信息，就生成了下图
image.png
-
点击生成用户右侧的授权，添加如图的授权策略
image.png
-
点击RAM角色管理->新建RAM角色，然后创建了一个如下图的角色
image.png
继续点击下一步添加，因为我这里已添加过了，无法再截图展示，大家按照提示页面添加就可以了。
-
点击右侧授权，并选择如下图的授权策略
image.png
-
接下来，我们来设置跨域
8.1 进入 OSS 管理控制台 界面。
8.2 在左侧存储空间列表中，单击目标存储空间名称，打开该存储空间概览页面。
8.3 单击 基础设置 页签，找到 跨域设置 区域，然后单击 设置。
8.4 单击 创建规则，打开 设定跨域规则 对话框。
8.5 设置跨域规则。
* 来源：指定允许的跨域请求的来源。允许多条匹配规则，以回车为间隔。每个匹配规则允许使用最多一个“*”通配符。
* 允许 Methods：指定允许的跨域请求方法。
* 允许 Headers：指定允许的跨域请求 header。允许多条匹配规则，以回车为间隔。每个匹配规则使用最多一个“*”通配符。
* 暴露 Headers：指定允许用户从应用程序中访问的响应头（例如一个 Javascript 的 XMLHttpRequest 对象)。
* 缓存时间：指定浏览器对特定资源的预取（OPTIONS）请求返回结果的缓存时间。
说明： 每个存储空间最多可以配置 10 条规则。
8.6 单击 确定。
说明： 您也可以对已有的规则进行编辑和删除操作。
image.png
截止到这里，阿里云创建Bucket、角色、授权、跨域等前期准备工作就全部完成了。
二、安装使用：
- 使用 NPM 安装 ali-oss
npm install ali-oss
- 新建一个文件来配置oss
let OSS = require('ali-oss');
let client = new OSS({
accessKeyId: 'your access key', // 你创建的Bucket时获取的
accessKeySecret: 'your access secret', // 你创建的Bucket时获取的
bucket: 'your bucket name', // 你创建的Bucket名称
region: 'oss-cn-hangzhou' // 你所购买oss服务的区域，默认oss-cn-hangzhou
});
- 在配置oss的这个文件中继续添加上传图片的api
// 上传
export async function put (filePath, file) {
try {
let result = await client.put(filePath, file)
return result
} catch (err) {
console.log(err)
}
}
// 删除
export async function remove (filePath) {
try {
let result = await client.delete(filePath)
return result
} catch (err) {
console.log(err)
}
}
image.png
- 在相关的组件中引入
import { client, put, remove } from '@/api/common/fileUtils'
- 代码编写
<template>
<div>
<el-form-item label="上传合同" prop="name">
<el-upload
list-type="picture-card"
action=""
:before-upload="beforeUpload"
:on-change="imgPreview"
:http-request="upLoad"
:on-remove="handleRemove"
:auto-upload="true">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
</div>
</template>
export default {
data () {
return {
dialogImageUrl: '',
dialogVisible: false,
fileList: [] // 定义数组，上传成功的文件都放在此数组中，删除时也从此数组中取
}
},
methods: {
// 上传合同图片
upLoad (item) { // item 是当前本地上传的这张图片
// 随机命名
var fileName = item.file.name // 当前本地上传的这张图片的名称(没有时间日期)
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1
month = (month < 10 ? '0' + month : month)
var mydate = date.getDate()
mydate = (mydate < 10 ? '0' + mydate : mydate)
this.baseurl = 'img/' + year + '/' + year + month + '/' + year + month + mydate + '/'
// 这里是把时间+图片名称拼接起来形成一个新的图片上传至oss，目的是区别于本地图片的名称，避免名称相同会误删，同时便于查看oss上最新上传图片的时间点
var filePath = this.baseurl + new Date().getTime() + '-' + fileName
var file = item.file // 当前本地上传的这张图片
put(filePath, file).then(result => { // 调oss api 上传图片
console.log(result)
// 文件上传成功后，获取返回值中的文件名name，并把其放入fileList数组中，表示当前已上传的文件
this.fileList.push(result.name)
})
},
// 删除合同图片
handleRemove (file) { // file 当前本地已上传的这张图片
var fileName = file.name // 当前本地已上传的这张图片的名称(带有时间日期)
var removeName = ''
this.fileList.forEach(function (name) { // forEach 在循环的数组中(fileList)找到oss和本地相同的文件名称
if (name.match(fileName)) {
removeName = name // 给循环出匹配上文件名的name赋值，这里循环出的图片是带有时间日期
}
})
console.log(removeName)
remove(removeName).then(result => { // 把循环出来的图片传进来，然后进行删除
console.log(result)
if (result.res.status != '204') {
console.log('删除失败')
}
})
}
}
}
网友评论