在之前的开发当中都是后台处理上传，前端负责上传接口调用，涉及到直传到阿里云对象存储服务（oss），查阅了相关资料借鉴相关的文章然后做了一些调整，分享出来希望能帮助到遇到这个需求的小伙伴，下面是具体的步骤。
使用oss
1.使用 NPM 安装ali-oss
npm install ali-oss
2.写一个公用的ali-oss.js
// 引入ali-oss
let OSS = require('ali-oss')
/**
* [accessKeyId] {String}：通过阿里云控制台创建的AccessKey。
* [accessKeySecret] {String}：通过阿里云控制台创建的AccessSecret。
* [bucket] {String}：通过控制台或PutBucket创建的bucket。
* [region] {String}：bucket所在的区域， 默认oss-cn-hangzhou。
*/
let client = new OSS({
region: '<oss region>',
secure: true, // secure: 配合region使用，如果指定了secure为true，则使用HTTPS访问
accessKeyId: '<Your accessKeyId>',
accessKeySecret: '<Your accessKeySecret>',
bucket: '<Your bucket name>'
})
3.调用
/**
* 上传文件，大小不能超过5GB
* @param {string} ObjName OSS的储存路径和文件名字
* @param {string} fileUrl 本地文件
* @retruns Promise
*/
export const put = async (ObjName, fileUrl) => {
try {
let result = await client.put(`${ObjName}`, fileUrl)
// ObjName为文件名字,可以只写名字，就直接储存在 bucket 的根路径，如需放在文件夹下面直接在文件名前面加上文件夹名称
return result
} catch (e) {
console.log(e)
}
}
// 上传成功之后，转换真实的地址
export const signatureUrl= async (ObjName) => {
try {
let result = await client.signatureUrl(`${ObjName}`)
return result
} catch (e) {
console.log(e)
}
}
4.保证上传文件的唯一性，随机生成文件名
/**
* 生成随机文件名称
* 规则八位随机字符，加下划线连接时间戳
*/
export const getFileNameUUID = () => {
function rx() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}
return `${+new Date()}_${rx()}${rx()}`
}
使用element的 upload 组件进行上传
使用Element-UI的 Upload 组件的自定义方法http-request上传，覆盖默认的。
直接贴代码
<template>
<div class="hello">
<el-upload
class="upload-demo"
action
:http-request="handleUpload"
:before-upload="beforeUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
<script>
import { put, signatureUrl, getFileNameUUID } from '@/utils/ali-oss'
export default {
name: 'Upload',
},
methods: {
beforeUpload(file) {
// 限制上传类型
const fileExtensions = getFileName(file.name) === '.doc' || getFileName(file.name) === '.docx' || getFileName(file.name) ==='.pdf'
//限制的上限为20M
const max20M = file.size / 1024 / 1024 < 20;
if (!fileExtensions) {
this.$message.error('上传文件类型只能是 .doc, .docx, .pdf 格式!');
}
if (!max20M) {
this.$message.error('上传文件大小不能超过 20MB!');
}
return fileExtensions && max20M;
},
/**
* 自定义上传方法
*/
handleUpload(option) {
// 获取文件的后缀名
let objName = getFileNameUUID()
var obj = option.file.name
var index = obj.lastIndexOf(".");
obj = obj.substring(index,obj.length);
// 生成的文件名，保留文件后缀名，进行拼接
let objName = getFileNameUUID() + getFileName(option.file.name)
// 调用 ali-oss 中的方法,flieName是存放的文件夹名称，可自己定义
put(`flieName/${objName}`, option.file).then(res => {
console.log(res)
// 上传成功之后，转换真实的地址
signatureUrl(`flieName/${objName}`).then(res => {
console.log(res)
})
})
}
}
}
</script>
最后，提交到后台保存文件地址
上传到阿里云OSS成功后，会返回文件的地址，提交给后台保存地址就可以了。
