前端上传文件直传阿里云oss

ps: 最近突然接到了系统文件要直传阿里云oss得需求，赶紧去看了看阿里云得开放文档oss

查完了一些资料后，就准备着手开发了，对了我们得上传文件用得是element ui 得 el-upload

准备工作，想直传阿里云少不了一些基本的配置，密钥等信息;这些东西从哪里来呢，当然是需要我们的最佳搭档后端开发拿到给我们拉，哈哈，阿里云有提供给方法给后台，我们要调用签名接口去后台拿到

endpoint = "http://oss-cn-"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.currentIndexthis.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的讲解就结束了，希望能给你带来一点点帮助，感激。

下面是我们的公众号，平时会分享一些技术文章还有多多的原创程序员轻松一刻漫画哦~~欢迎关注来撩~

更多精彩，欢迎关注我们