Page6.vue
3.21 KB
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
<template>
<el-upload
list-type="picture-card"
action="''"
:http-request="upload"
:before-upload="beforeAvatarUpload"
>
<i class="el-icon-plus"></i>
</el-upload>
</template>
<script>
// import {getAliOSSCreds} from '@/api/common' // 向后端获取 OSS秘钥信息
// import {createId} from '@/utils' // 一个生产唯一的id的方法
import OSS from 'ali-oss'
import { client, getAliOSSCreds } from '../../common/oss-upload.js'
import { uploadFile } from '../../api/api.js'
export default {
name: 'imgUpload',
data() {
return {}
},
created() {
// console.log('client:', client)
// console.log('client.list:', client.list())
},
methods: {
// 图片上传前验证
beforeAvatarUpload(file) {
console.log('file:', file)
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isLt2M
},
// 上传图片到OSS 同时派发一个事件给父组件监听
upload(item) {
let params = new FormData() //使用formData对象
params.append('path', '/pro/mzczcradmin/')
params.append('file', item.file)
uploadFile(params)
.then(result => {
console.log('upload result:', result)
})
.catch(err => {})
return // OSS上传
client
.list()
.then(result => {
console.log('result222:', result)
console.log('objects: %j', result.objects)
// return client.put('my-obj', new OSS.Buffer('hello world'))
})
.then(result => {
console.log('put result: %j', result)
// return client.get('my-obj')
})
.then(result => {
// console.log('get result: %j', result.content.toString())
})
.catch(err => {
console.log('err:', err)
})
// getAliOSSCreds()
// .then(res => {
// console.log('getAliOSSCreds res:', res)
// // 向后台发请求 拉取OSS相关配置
// let creds = res
// let client = new OSS(creds)
// // let key =
// // 'resource/' +
// // localStorage.userId +
// // '/images/' +
// // createId() +
// // '.jpg' // 存储路径，并且给图片改成唯一名字
// let key = '/pro/mzczcradmin/111.png'
// return client.put(key, item.file) // OSS上传
// })
// .then(res => {
// console.log(res.url)
// // this.$emit('on-success', res.url) // 返回图片的存储路径
// })
// .catch(err => {
// console.log('err:', err)
// })
}
}
}
</script>