参考
效果图：
上传图片到阿里云.png
上传图片到阿里云2.png
1、阿里云OSS配置
- 进入控制台->对象存储OSS
上传图片到阿里云3.png
- 创建对象存储bucket（image-nora是我之前创建好的）
上传图片到阿里云4.png
上传图片到阿里云5.png
上传图片到阿里云6.png
-
设置跨域
基础设置->跨域设置->创建跨域规则（安全系数很低）
上传图片到阿里云7.png
- 创建AccessKey
上传图片到阿里云8.png
上传图片到阿里云9.png
2、前端代码
-
先安装 element-ui 、alio-oss
npm i ali-oss --save 新建
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。
*/
export function client(data) {//data后端提供数据
return new OSS({
region: 'XXXX', // 修改的地方 地区，我的是oss-cn-beijing
accessKeyId: 'XXX', // 修改的地方 刚才AccessKey管理那里的数据
accessKeySecret: 'XXX', // 修改的地方 刚才AccessKey管理那里的数据
bucket: 'image-nora' // 修改的地方 就是创建的bucket名字
})
}
/**
* 生成随机文件名称
* 规则八位随机字符，加下划线连接时间戳
*/
export const getFileNameUUID = () => {
function rx() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}
return `${+new Date()}_${rx()}${rx()}`
}
- 组件内使用
html内容：
<template>
<div class="content">
<el-upload
action
:http-request="Upload"
:on-preview="handlePreview"
:before-remove="beforeRemove"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-exceed="handleExceed"
drag
:limit="limit"
:file-list="fileList"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
</el-upload>
<el-progress
v-show="showProgress"
:text-inside="true"
:stroke-width="15"
:percentage="progress"
></el-progress>
</div>
</template>
js内容：
<script>
import { client, getFileNameUUID } from "../utils/ali-oss"; //前面的ali-js文件内的两个封装函数
// 注意 我没有使用后台的代码，直接写死了Ali-OSS数据
// import { getAliOSSConfig } from "@/api/admin"; //请求后台的接口拿Ali-OSS数据
export default {
name: "Upload",
props: {
limit: {
type: Number,
default: 1
}
},
data() {
return {
fileList: [], //文件列
showProgress: false, //进度条的显示
dataObj: {}, //存签名信息
progress: 0 //进度条数据
};
},
methods: {
// 文件超出个数限制时的钩子
handleExceed(files, fileList) {
this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
},
// 点击文件列表中已上传的文件时的钩子
handlePreview(file) {},
// 删除文件之前的钩子
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
// 文件列表移除文件时的钩子
handleRemove(file, fileList) {},
// 文件上传成功时的钩子
handleSuccess(response, file, fileList) {
this.fileList = fileList;
},
//文件上传前的校验
beforeAvatarUpload(file) {
const isLt100M =
file.size / 1024 / 1024 > 10 && file.size / 1024 / 1024 < 1024;
const isLt30 = file.name.length < 30;
if (["video/mp4"].indexOf(file.type) == -1) {
this.$message.error("请上传正确的视频格式");
return false;
}
if (!isLt100M) {
this.$message.error("上传视频大小要在10MB~1GB之间哦!");
return false;
}
if (!isLt30) {
this.$message.error("上传视频文件名称长度必须要小于30个文字哦!");
return false;
}
// 请求后台接口拿配置参数
return new Promise((resolve, reject) => {
getAliOSSConfig()
.then(response => {
this.dataObj = response.data; //接口返回配置参数
console.log(response.data);
resolve(true);
})
.catch(err => {
console.log(err);
reject(false);
});
});
},
// http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现
Upload(file) {
const that = this;
async function multipartUpload() {
let temporary = file.file.name.lastIndexOf(".");
let fileNameLength = file.file.name.length;
let fileFormat = file.file.name.substring(
temporary + 1,
fileNameLength
);
let fileName = getFileNameUUID() + "." + fileFormat;
client(that.dataObj)
.multipartUpload(`image/${fileName}`, file.file, {
progress: function(p) {
//p进度条的值
console.log(p);
that.showProgress = true;
that.progress = Math.floor(p * 100);
}
})
.then(result => {
//上传成功返回值，可针对项目需求写其他逻辑
console.log(result);
})
.catch(err => {
console.log("err:", err);
});
}
multipartUpload();
}
}
};
</script>
我没有使用后台代码获取Ali-OSS数据，直接在前端写好了，上传成功返回的数据里面有访问地址，这时就可以直接拿到url使用了。
- end！
