首先安装依赖
cnpm install ali-oss
封装client
若是想减小打包后静态资源大小，可在index.html引入：（然后在client.js里注释掉const oss = require(‘ali-oss')）
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const oss = require('ali-oss')
export function client(data) {
// 后端提供数据
return new oss({
region: data.endpoint, // *****.aliyuncs.com
accesskeyid: data.accesskeyid,
accesskeysecret: data.accesskeysecret,
bucket: data.bucketname,
endpoint: data.endpoint,
secure: true
})
}
|
然后，在vue页面引用，给client传入后台返回的阿里数据
结果如下图：
1、html部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<el-upload
action=""
:http-request="upload"
:data="aliyun"
:multiple="false"
:show-file-list="true"
list-type="picture-card"
:on-preview="handlepicturecardpreview"
:on-remove="handleremove"
:limit="5"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogvisible">
<img width="100%" :src="dialogimageurl" alt="">
</el-dialog>
<p style="color: #999;">图片上传限制： 1.最多5张； 2.最大1m</p>
|
2、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
|
import { getaliyun, createorder } from '@/api/order-management'
import { client } from '@/utils/alioss'
export default {
name: 'appeal',
data() {
return {
dialogimageurl: '',
dialogvisible: false,
aliyun: {}, // 存签名信息
progress: 0, // 进度条
imgurl: [] // 存上传后的图片url
}
},
created() {
this.getaliyun()
},
methods: {
// 获取阿里云数据
async getaliyun() {
const { data } = await getaliyun()
this.aliyun = data
},
// 上传图片
upload(file) {
const that = this
// 判断扩展名
const tmpcnt = file.file.name.lastindexof('.')
const exname = file.file.name.substring(tmpcnt + 1)
const names = ['jpg', 'jpeg', 'png']
if (names.indexof(exname) < 0) {
this.$message.error('不支持的格式!')
return
}
if (file.size > 1024 * 1024) {
this.$message.error('图片大小最大1m')
return
}
async function multipartupload() {
// const filename = that.name + file.file.uid
const filename = that.aliyun.objectname + +'/' + date.now() + '-' + file.file.name
// filename = aliyunconfig.objectname+'/'+date.now()+'-'+file.name //所要上传的文件名拼接 (test/)
// 定义唯一的文件名，打印出来的uid其实就是时间戳
// client 是第一步中的 client
client(that.aliyun).put(filename, file.file,
{
progress: function(p) { // 获取进度条的值
console.log(p)
that.progress = p * 100
}
}).then(
result => {
// 下面是如果对返回结果再进行处理，根据项目需要
// console.log(result)
// that.imgurl = 'http://' + result.bucket + '.' + that.aliyun.endpoint + '/' + result.name
that.dialogimageurl = result.url
that.imgurl.push({
name: file.file.name,
url: result.url
})
console.log(that.imgurl)
}).catch(err => {
console.log('err:', err)
})
}
multipartupload()
},
// 图片预览
handlepicturecardpreview(file) {
this.dialogimageurl = file.url
this.dialogvisible = true
},
// 删除图片
handleremove(file, filelist) {
// console.log(file)
for (var i in this.imgurl) {
if (this.imgurl[i].name === file.name) {
this.imgurl.splice(i, 1)
}
}
}
}
}
</script>
|
补充知识：vue-cli项目中，配合element_ui来实现上传图片与视频到oss上。
|
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
|
<template>
<div class="basicinfo">
<el-upload class="avatar-content"
v-loading="fileloading"
accept="image/*"
drag action="https://zxcity-app.oss-cn-hangzhou.aliyuncs.com"
:show-file-list="false"
:data="ossparams"
:before-upload="checkparams"
:on-progress="progress"
:on-error="uploaderr"
:on-success="uploadsuccess"
:on-remove="filelistremove"
multiple
>
</el-upload>
<div v-for="(item,index) in filelist" :key="index" class="imgdiv">
<img :src="item.imgurl" alt="">
<p>{{item.progress}}</p>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
form: {
url: ''
},
filelist: [],
fileloading: false,
ossparams: {
expiretime: '',
key: '',
dir: ''
}
}
},
methods: {
// 图片上传前检测参数变化
checkparams (file) {
var _this = this
var promise = new promise((resolve, reject) => {
axios.get('https://share.zxtest.izxcs.com/zxcity_restful/ws/oss/ossupload', {})
.then(function (response) {
var params = response.data
_this.ossparams = params
_this.ossparams.name = file.name
_this.ossparams.ossaccesskeyid = params.accessid
_this.ossparams.success_action_status = '200'
_this.ossparams.key = params.dir + '/' + _this.getuuid()
var obj = {
name: _this.ossparams.name,
key: _this.ossparams.key,
host: _this.ossparams.host,
progress: 0,
imgurl: ''
}
_this.filelist.push(obj)
// _this.fileloading = true
resolve()
})
.catch(function (error) {
console.log(error, '错误')
reject(error)
})
})
return promise
},
// 上传中
progress (event, file, filelist) {
console.log('上传中...')
console.log(file)
console.log(filelist)
this.filelist.foreach((item, index) => {
if (item.name === file.name) {
item.progress = parseint(file.percentage)
}
})
},
// 上传失败提示
uploaderr (res) {
this.$message.error('上传出错！')
},
// 上传成功后上传到file表
uploadsuccess (response, file, filelist) {
console.log('上传成功')
this.filelist.foreach((item, index) => {
if (item.name === file.name) {
item.imgurl = item.host + '/' + item.key
item.progress = 100
}
})
},
// 文件删除
filelistremove (file, filelist) {
this.form.url = ''
},
// 随机名称
getuuid () {
return `${this.str4()}${this.str4()}-${this.str4()}-${this.str4()}-${this.str4()}-${this.str4()}${this.str4()}${this.str4()}`
},
str4 () {
return (((1 + math.random()) * 0x10000) | 0).tostring(16).substring(1)
}
}
}
</script>
<style lang="less" scoped>
.imgdiv{
display: block;
float: left;
width: 80px;
height: 100px;
border: 2px solid black;
img{
display: block;
width: 50px;
height: 80px;
}
p{
font-size: 14px;
text-align: center;
}
}
</style>
|
以上这篇vue 实现element upload上传图片到阿里云就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/LuviaWu/article/details/95864471