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的解说就完结了，心愿能给你带来一点点帮忙，感谢。
上面是咱们的公众号，平时会分享一些技术文章还有多多的原创程序员轻松一刻漫画哦~~欢送关注来撩~

更多精彩，欢送关注咱们