前端直接上传图片或视频到阿里云

上传图片到阿里云

//html
<el-form-item label="拆红包底纹" prop="shading">
  <el-upload
    ref="upload"
    class="avatar-uploader"
    action="#"
    :show-file-list="false"
    :http-request="httpRequest7"
    :on-change="handlePreview7"
  >
    <img v-if="modalActivity.shading" :src="modalActivity.shading" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"/>
  </el-upload>
  <template>
    <div style="color: red;font-weight: bold;font-size: 12px">请上传9：16的jpg/png格式图片</div>
  </template>
</el-form-item>

//js
handlePreview4(file) {
  this.files4 = file
},
httpRequest4(param) {
  console.log(param)
  const file = param.file
  const isJpg = file.type === 'image/jpeg'
  const isLt80K = file.size / 1024 < 80
  if (!isJpg) {
    this.$message.error('上传图片的格式只能是JPG格式!')
    return false
  }
  if (!isLt80K) {
    this.$message.error('上传图片的大小不能超过 80k!')
    return false
  }
  return new Promise(function(resolve, reject) {
    let width = 320
    let height = 480
    let _URL = window.URL || window.webkitURL
    let img = new Image()
    img.onload = function() {
      console.log(img.width, img.height)
      let valid = img.width == width && img.height == height
      valid ? resolve() : reject()
    }
    img.src = _URL.createObjectURL(file)
  }).then(() => {
    return new Promise((resolve, reject) => {
      const _name = new Date().getTime() + param.file.name.substr(param.file.name.lastIndexOf(
        '.'))
      // 上传图片请求参数
      imageP({
        fileAddress: 'bdSettle_firstPos',
        fileName: _name
      }).then(res => {
        if (res.status == '200') {
          const db = res.data
          this.calcUrl4(db)
        }
      }).catch(err => {
      })
    })
  }, () => {
    this.$message.error('上传的图片宽高必须是320*480!')
  })
},
calcUrl4(db) {
  console.log(db, 'db')
  const client = new FormData()
  const key = db.key.split('=')[0]
  client.append('key', `${key}`)
  client.append('expireTime', `${db.expireTime}`)
  client.append('OSSAccessKeyId', `${db.OSSAccessKeyId}`)
  client.append('policy', `${db.policy}`)
  client.append('signature', `${db.signature}`)
  client.append('success_action_status', 200)
  client.append('file', this.files4.raw)
  this.fn4(db.uploadHost, client, key).then(() => {
    this.calcUrl4(db)
  })
},
fn4(url, client, key) {
  return new Promise((resolve, reject) => {
    axios.post(url, client)
      .then(res => {
        this.modalActivity.activeInfoGoodImg = `${url}/${key}`
        if (res.status == '200') {
          this.$message({
            message: '上传成功',
            type: 'success'
          })
        }
      })
      .catch(err => {
        console.log(err, 'rrrrr')
        this.$message({
          message: '上传失败',
          type: 'error'
        })
      })
  })
},

上传视频到阿里云

//html
<el-form-item label="拆红包动画">
  <el-upload
    ref="upload"
    class="avatar-uploader"
    action="#"
    :show-file-list="false"
    :http-request="httpRequest8"
    :on-change="handlePreview8"
  >
    <div v-if="modalActivity.redPackImg && showVideoThemeIntroduces">
      <video
        ref="videoPlay"
         autoplay
        style="width: 160px;height:90px"
      >
        <source
          :src="modalActivity.redPackImg"
          type="video/mp4"
        >
      </video>
    </div>
    <i v-else class="el-icon-plus avatar-uploader-icon"/>
  </el-upload>
  <template>
    <div style="color: red;font-weight: bold;font-size: 12px">请上传9：16的mp4动画</div>
  </template>
</el-form-item>

//js
handlePreview8(file) {
  this.files8 = file
  this.showVideoThemeIntroduces=false
},
httpRequest8(param) {
  const file = param.file
  if (file.type == 'video/mp4') {
    return new Promise(function(resolve, reject) {
      let _URL = window.URL || window.webkitURL
      let videoElement = document.createElement('video')
      videoElement.addEventListener('loadedmetadata', function() {
        console.log(videoElement.videoWidth, videoElement.videoHeight)
        let valid = true
        valid ? resolve() : reject()
        console.log(valid, 'valid')
      })
      videoElement.src = URL.createObjectURL(file)
    }).then(() => {
      this.imgVideo8(file)
    }, () => {
      this.$message.error('上传的动画9:16')
    })
  } else {
    this.$message.error('请上传指定形式mp4动画')
    return
  }

},
calcUrl8(db) {
  const client = new FormData()
  const key = db.key.split('=')[0]
  client.append('key', `${key}`)
  client.append('expireTime', `${db.expireTime}`)
  client.append('OSSAccessKeyId', `${db.OSSAccessKeyId}`)
  client.append('policy', `${db.policy}`)
  client.append('signature', `${db.signature}`)
  client.append('success_action_status', 200)
  client.append('file', this.files8.raw)
  this.fn8(db.uploadHost, client, key).then(() => {
    this.calcUrl8(db)
  })
},
fn8(url, client, key) {
  return new Promise((resolve, reject) => {
    axios.post(url, client)
      .then(res => {
        console.log(res, 'pppppp')
        if (res.status == '200') {
          this.showVideoThemeIntroduces=true
          const _url = `${url}/${key}`
          console.log(_url,'_url')
          this.modalActivity.redPackImg = `${url}/${key}`
          console.log(this.modalActivity.redPackImg,'this.modalActivity.redPackImg')
          this.$message({
            message: '上传成功',
            type: 'success'
          })
        }
      })
      .catch(err => {
        this.$message({
          message: '上传失败',
          type: 'error'
        })
      })
  })
},
imgVideo8(file) {
  return new Promise((resolve, reject) => {
    const _name = new Date().getTime() + file.name.substr(file.name.lastIndexOf(
      '.'))
    // 上传图片请求参数
    imageP({
      fileAddress: 'bdSettle_firstPos',
      fileName: _name
    }).then(res => {
      console.log(res, 'iiii')
      if (res.status == '200') {
        const db = res.data
        this.calcUrl8(db)
      }
    }).catch(err => {
    })
  })
},