ps: 最近突然接到了系统文件要直传阿里云oss得需求,赶紧去看了看阿里云得开放文档oss
- 查完了一些资料后,就准备着手开发了,对了我们得上传文件用得是element ui 得 el-upload
- 准备工作,想直传阿里云少不了一些基本的配置,密钥等信息;这些东西从哪里来呢,当然是需要我们的最佳搭档后端开发拿到给我们拉,哈哈,阿里云有提供给方法给后台,我们要调用签名接口去后台拿到
endpoint = "http://oss-cn-shenzhen.aliyuncs.com"
accessKeyId = "sdfadeswer2wr32423";
accessKeySecret = "sdfasd234213123";
bucketName = ""; // 自定义的名称
- 我们开始撸代码,首先是el-upload的写法,我们要自己上传其他的参数,所以要用:data
<el-upload
:ref="licenseUpload"
:action="addressOss"
:file-list="fileSets[type.code]"
:auto-upload="true"
:data="dataOss"
:on-success="uploadFinish"
:on-error="uploadError"
:before-upload="beforeUpload"
accept=".pdf,.png,.jpeg,.bmp,.jpg"
>
</el-upload>
- action 对应要上传的oss地址,我们要把页面的参数跟阿里云的参数做整合,在beforeUpload这个钩子里面做处理
- 上面也讲过我们需要签名拿到一些系统参数,并且放在请求的data参数里面,这里就要用到回调函数了,我这里用的是async, await
async beforeUpload(file) {
// 这里可以做下文件的大小限制,具体代码不写在这了
const signReponse = await getSignature() // 索要签名
this.addressOss = signReponse.data.host // 上传地址
this.dataOss = {
key: signReponse.data.dir + this.uploadType + '/' + file.name.substr(0, file.name.lastIndexOf('\.')) + '_' + exists.data.currentTime + '.' + file.name.split('.').pop(),
OSSAccessKeyId: signReponse.data.accessid,
policy: signReponse.data.policy,
signature: signReponse.data.signature,
callback: signReponse.data.callback,
// 'x:md5': this.currentMd5,
'x:original_file_name': file.name,
'x:file_type_code': this.currentFileTypeCode,
'x:object_id': this.objectId,
'x:object_type': this.uploadType
} // 上传额外参数
}
- 相信很多同学都发现了,页面的参数都用的'x:key'这样的方式传参,这个是阿里云定义的,只有这样传,我们后台才能拿到页面的参数哦
- 到这里参数跟url都拿到了,功能完成一半了!是不是so easy~~~
- 当然还有上传成功,失败这些钩子函数,这些都是基本的操作,就不写实例代码拉
- 上传完了,当然少不了预览,下载,删除这些操作了;那么预览,下载阿里云也提供了方法哦。
预览,下载这种操作考虑到安全性,只给临时凭证就行,这里是通过登录后拿token去咱们最好的伙伴java开发那边拿临时凭证并把它存起来,到页面上直接拿起来用哦
const ossCredential = JSON.parse(localStorage.getItem('ossCredential')) || {}
const OSS = require('ali-oss')
const clientOss = new OSS({
accessKeyId: ossCredential.accessKeyId,
accessKeySecret: ossCredential.accessKeySecret,
endpoint: ossCredential.endPoint,
stsToken: ossCredential.securityToken,
// region表示您申请OSS服务所在的地域,例如oss-cn-hangzhou。
bucket: ossCredential.bucketName
})
- 先初始化好oss对象,然后生成预览和下载的oss地址
handlePreview(file) {
this.imageUrl = clientOss.signatureUrl(file.objectKey)
},
handleDownload(file) {
window.open(clientOss.signatureUrl(file.objectKey, {
expires: 3600,
response: {
'content-disposition': 'attachment; filename="' + file.fileName + '"'
}
})
)
}
这里预览跟下载有区别的哦,别搞错了,下载要加上 response相关的设置
- 到这里功能基本完成了,但是有的同学应该看到了,上面的代码有个md5的注释,是的,没错,我们上传到阿里云的目的是什么:前端直传够快,不占用我们自己的服务器资源,如果每次上传同一张都去存储,那肯定是不行的,这就需要计算一个唯一值,那么md5出场的时机就来了!!!
- 我这里md5用的是npm 里面直接拿的 spark-md5,详细的用法也可以自己过去看看哦
安装 npm install spark-md5 --save
页面引入 const SparkMD5 = require('spark-md5')
要判断文件是否已经上传过,也要借助我们后台的帮助哦,这个动作肯定也是要在上传之前做的,所以也要用到回调函数,改造下上面那个beforeUpload函数
requestMd5Val(file) {
// console.log(file)
var fileReader = new FileReader()
// 此处打印file可看到file下的raw为文件属性
// var dataFile = file.raw;
var spark = new SparkMD5.ArrayBuffer()
// 获取文件二进制数据
fileReader.readAsArrayBuffer(file)
// 异步执行函数
return new Promise((resolve) => {
fileReader.onload = function(e) {
spark.append(e.target.result)
var md5 = spark.end()
resolve(md5)
}
})
},
async beforeUpload(file) {
// 这里可以做下文件的大小限制,具体代码不写在这了
this.currentMd5 = await this.requestMd5Val(file) // 拿到md5的值
const exists = await checkExists({ md5: this.currentMd5 }) // 校验是否存在
this.loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
}) // 我这里给上传加了个菊花,上传成功,失败的时候要关掉哦
if (exists.data && exists.data.fileInfo && exists.data.fileInfo.md5) {
// 如果阿里云已经存在了,就不上传了,直接更新我们服务器的相对应索引
const dataOssObj = {
originalFileName: file.name,
fileName: file.name.substr(0, file.name.lastIndexOf('\.')) + '_' + exists.data.currentTime + '.' + file.name.split('.').pop(),
filePath: exists.data.fileInfo.filePath,
objectType: this.uploadType,
objectId: this.objectId,
fileTypeCode: this.currentFileTypeCode,
objectKey: exists.data.fileInfo.objectKey,
etag: exists.data.fileInfo.etag,
md5: this.currentMd5
}
postFiles(dataOssObj).then(res => {})
const resfVal = 'licenseUpload' + this.currentIndex
this.loading.close()
this.$refs.resfVal.abort() // 停止这个上传动作
} else {
const signReponse = await getSignature() // 索要签名
this.addressOss = signReponse.data.host // 上传地址
this.dataOss = {
key: signReponse.data.dir + this.uploadType + '/' + file.name.substr(0, file.name.lastIndexOf('\.')) + '_' + exists.data.currentTime + '.' + file.name.split('.').pop(),
OSSAccessKeyId: signReponse.data.accessid,
policy: signReponse.data.policy,
signature: signReponse.data.signature,
callback: signReponse.data.callback,
'x:md5': this.currentMd5,
'x:original_file_name': file.name,
// 'x:original_file_name': file.name.substr(0, file.name.lastIndexOf('\.')) + '_' + exists.data.currentTime + '.' + file.name.split('.').pop(),
'x:file_type_code': this.currentFileTypeCode,
'x:object_id': this.objectId,
'x:object_type': this.uploadType
} // 上传额外参数
}
}
checkExists, getSignature 都是调用的后台api,不贴代码了~~~
- end:element ui 上传文件到阿里云oss的讲解就结束了,希望能给你带来一点点帮助,感激。
下面是我们的公众号,平时会分享一些技术文章还有多多的原创程序员轻松一刻漫画哦~~欢迎关注来撩~
更多精彩,欢迎关注我们
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。