vue 通过element el-upload上传到阿里云仓库的步骤
- 安装ali-oss
npm install ali-oss
- 新建配置文件,如ali_oss.js,我这里只是用了他的getFilePath跟getFileNumber部分
可以在这里配置oss client,也可以在vue代码中通过接口动态获取,本文使用的是后者,不过提供前者的实现,可以参看下面代码的配置部分
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 等参数就需要这一步)
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方法
<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文件
import ossClient, { getFilePath, getSystemPath } from '@/utils/ali_oss'
//上传文件操作,调用阿里云
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已经获取到了,如果是加密的数据,则继续调用自己的接口,获取真实可读的图片地址