vue 通过element el-upload上传到阿里云仓库的步骤
安装ali-oss
1
npm install ali-oss
新建配置文件，如ali_oss.js，我这里只是用了他的getFilePath跟getFileNumber部分
可以在这里配置oss client，也可以在vue代码中通过接口动态获取，本文使用的是后者，不过提供前者的实现，可以参看下面代码的配置部分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
let OSS = require('ali-oss')
let region = '你的region '
//云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS
let accessKeyId = '你的accessKeyId '
let accessKeySecret = '你的accessKeySecret '
let bucket = '你的bucket '
//client配置
let client = new OSS({
region: region,
accessKeyId: accessKeyId,
accessKeySecret: accessKeySecret,
bucket: bucket
})
export default (conf) => {
return new OSS(conf)
};
//文件上传
export const put = async(filePath, fileUrl) => {
try {
let result = await client.put(filePath, fileUrl)
return result
} catch (e) {
console.log(e)
}
}
//oss的地址
export const getSystemPath = () => {
return ossPath
}
//文件的上传地址
export const getFilePath = (ObjName, orangeName) => {
let fileName = getFileNumber() + getFileSuffix(orangeName)
let result = `/shuyu/admin/${fileName}`
return result
}
//oss文件名获取随机
export const getFileNumber = () => {
let timeNumber = new Date().getTime()
let randomNumber = Math.floor(Math.random() * 999999)
return timeNumber + '' + randomNumber
}
//获取文件后缀
export const getFileSuffix = (fileName) => {
let name = fileName.lastIndexOf('.')//取到文件名开始到最后一个点的长度
let length = fileName.length
let fileSuffix = fileName.substring(name, length)
return fileSuffix
}
//检查文件格式
export const checkFileFormat = (fileName) => {
let isJPG = false
let type = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase()
if (type === 'jpg' || type === 'png' || type === 'jpeg') {
isJPG = true
} else if (type === 'mp4' || type === '3gp' || type === 'avi') {
isJPG = true
}
return isJPG
}
//获取录音和视频的时长
export const getTimeFromVideo = (file) => {
let time = 0
var url = URL.createObjectURL(file)
var audioElement = new Audio(url)
audioElement.addEventListener('loadedmetadata', (_event) => {
time = parseInt(audioElement.duration)
return time
})
console.log(time)
}如果是直接在JS配置可以跳过这一步，如果通过后台接口返回accessKeyId 等参数就需要这一步
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//data部分
uploadConf: {
region: 'oss-cn-beijing',
accessKeyId: null,
accessKeySecret: null,
bucket: 'linkdoc-felling',
stsToken: null
}
//methods部分
getOssToken().then(res => {
this.uploadConf.accessKeyId = res.AccessKeyId
this.uploadConf.accessKeySecret = res.AccessKeySecret
this.uploadConf.stsToken = res.SecurityToken
})配置el-upload，自定义http-request方法
1
2
3
4
5
6
7
8
9<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:http-request="fileUpLoad"
>
<img v-if="form.credentialsRealUrl" :src="form.credentialsRealUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>实现http-request对应的方法
如果参照下面的代码，一定别忘记引入我们的js文件1
import ossClient, { getFilePath, getSystemPath } from '@/utils/ali_oss'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15//上传文件操作，调用阿里云
fileUpLoad(option){
//提前拼接返回地址
let filePath = getFilePath(this.$route.name, option.file.name)
if (option.file.size > 2024000) {
this.$message.error('资源文件大小超出范围')
return
}
ossClient(this.uploadConf).put(filePath, option.file).then((res) => {
console.log(res)
if (res !== undefined) {
this.$message.success('上传成功')
}
})
}
至此，上传成功，filePath已经获取到了，如果是加密的数据，则继续调用自己的接口，获取真实可读的图片地址
