vue+element+阿里云oss图片上传

vue+element+阿里云oss图片上传

1、npm安装ali-oss

1
npm install ali-oss

2、使用element的 upload 组件进行上传

html部分如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<div class="home">
<el-upload
class="upload-demo"
action
:http-request="fnUploadRequest"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>

js部分如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import OSS from "ali-oss";
export default {
data() {
return {
dialogImageUrl: "",
dialogVisible: false,
disabled: false,
loading: false,
fileList: [],
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
async fnUploadRequest(option) {
try {
console.log("参数", option);
// 获取OSS配置信息
let client = new OSS({
secure: true,
accessKeyId: "", //阿里云AccessKey ID
accessKeySecret: "", //阿里云accessKeySecret
bucket: "", //bucket域名
region: "", //oss地区,如:oss-cn-beijing。(注:不用加.aliyun.com)
});
this.loading = true;

//获取当前时间(为了保证不出现重复文件名导致文件覆盖)
function getFormatDate() {
var date = new Date();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentDate =
date.getFullYear() +
"-" +
month +
"-" +
strDate +
" " +
date.getHours() +
":" +
date.getMinutes() +
":" +
date.getSeconds();
return currentDate;
}

let file = option.file;
const point = file.name.lastIndexOf(".");
let suffix = file.name.substr(point);
let fileName = file.name.substr(0, point);
let date = getFormatDate();
let fileNames = `${fileName}_${date}${suffix}`;
let relativePath = "blog/";
console.log("oss客户端", client);
console.log("文件", file);
// 分片上传文件
let ret = await client.multipartUpload(relativePath + fileNames, file, {
progress: async function(p) {
let e = {};
e.percent = p * 100;
option.onProgress(e);
},
});

if (ret.res.statusCode === 200) {
console.log("上传成功", ret);
} else {
option.onError("上传失败");
}
} catch (error) {
console.error(error);
option.onError("上传失败");
}
this.loading = false;
},
},
};

全部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<template>
<div class="home">
<el-upload
class="upload-demo"
action
:http-request="fnUploadRequest"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>

<script>
import OSS from "ali-oss";
export default {
data() {
return {
dialogImageUrl: "",
dialogVisible: false,
disabled: false,
loading: false,
fileList: [],
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
async fnUploadRequest(option) {
try {
console.log("参数", option);
// 获取OSS配置信息
let client = new OSS({
secure: true,
accessKeyId: "", //阿里云AccessKey ID
accessKeySecret: "", //阿里云accessKeySecret
bucket: "", //bucket域名
region: "", //oss地区,如:oss-cn-beijing。(注:不用加.aliyun.com)
});
this.loading = true;
function getFormatDate() {
var date = new Date();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentDate =
date.getFullYear() +
"-" +
month +
"-" +
strDate +
" " +
date.getHours() +
":" +
date.getMinutes() +
":" +
date.getSeconds();
return currentDate;
}

let file = option.file;
const point = file.name.lastIndexOf(".");
let suffix = file.name.substr(point);
let fileName = file.name.substr(0, point);
let date = getFormatDate();
let fileNames = `${fileName}_${date}${suffix}`;
let relativePath = "blog/";
console.log("oss客户端", client);
console.log("文件", file);
// 分片上传文件
let ret = await client.multipartUpload(relativePath + fileNames, file, {
progress: async function(p) {
let e = {};
e.percent = p * 100;
option.onProgress(e);
},
});

if (ret.res.statusCode === 200) {
console.log("上传成功", ret);
} else {
option.onError("上传失败");
}
} catch (error) {
console.error(error);
option.onError("上传失败");
}
this.loading = false;
},
},
};
</script>

<style>
.home {
width: 100%;
height: 100vh;
position: relative;
}

.upload-demo {
width: 30%;
height: 30%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
</style>


vue+element+阿里云oss图片上传
https://jhao0413.github.io/2020/09/24/vue+element+阿里云oss图片上传/
作者
九號
发布于
2020年9月24日
许可协议