文件上传s3

前端上传文件到云服务器

• html代码

<div class="upload_video_box">
   <div class="upload_wrap">
     <el-upload
       class="upload_video"
       drag
       action=""
       :http-request="uploadMediaFile"
       :before-upload="beforeUploadVideoHandler"
       ref="vidUpload"
       :show-file-list="false"
       :limit='1'
       multiple>
       <i class="el-icon-upload"></i>
       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
       <div class="el-upload__tip" slot="tip">仅支持上传mp4格式的视频，大小在100M以内</div>
     </el-upload>
     <div class="video_show" v-if="video && uploadVideoProgress===100">
       <video :src="video" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
       <img class="video_delete" :src="closeIcon" @click="clearVideo"/>
     </div>
   </div>
   <div class="upload_pro">
     <el-progress v-show="![0, 100].includes(uploadVideoProgress)" :percentage="uploadVideoProgress"></el-progress>
   </div>
 </div>

• js代码

// s3配置-配置信息由后台接口数据获取
import AWS from 'aws-sdk'
const s3 = new AWS.S3({
	region: data.regionName, // 文件存放地区
	endpoint: data.endpoint, // 文件系统地址
	accessKeyId: data.accessKey, // 访问的key
	secretAccessKey: data.secretKey, // 秘钥
	bucket: data.bucketName // 文件存放位置
})

// 文件上传
// key根据文件名称和后台换取相应的key
const upload = s3.upload({
    Key: key || `${(new Date()).getTime()}-${encodeURIComponent(file.name)}`,
    Body: file,
    Bucket: this.awsConfig.bucket, // 文件存放位置
    ContentType: file.type,
    'Access-Control-Allow-Credentials': '*'
  }, {
  queueSize: 3, // 设置一次上传分块的数量
  connectionTimeout: 60 * 60 * 1000 * 4, // 设置超时的时间
  partSize: 5 * 1024 * 1024, // 设置分块的大小
  httpOptions: {
    timeout: 60 * 60 * 1000 * 4
  }
})

// 上传时间监听设置进度条
upload.on('httpUploadProgress', (e) => {
  const pre = parseInt(e.loaded, 10) / parseInt(e.total, 10)
  this.uploadVideoProgress = parseInt(pre * 100)
})

// 上传云服务器
upload.send((err, data) => {
  this.uploading = false
  if (err) {
    this.$message.success('上传失败')
  } else {
    this.$message.success('上传成功')
    this.uploadVideoProgress = 100
    this.video = data.Location
    this.$emit('uploadVideo', this.video)
  }
})