Vue项目中使用upload组件上传图片,视频到OSS阿里云服务器

Vue项目中使用upload组件上传图片,视频到OSS阿里云服务器

项目中使用vue搭配elementui组件库的upload完成图片文件视频的上传,项目中是上传到OSS

了解upload组件

upload大家都不陌生,这里就不详细介绍了,大家可以到官网查看详细文档------element-upload文档

   //注意 action 属性必须要有,这里我们是上传OSS,不做固定
	   
       <el-form-item label="视频封面: ">
          <el-upload
            class="avatar-uploader"
            action
            :show-file-list="false"
            accept=".jpg,.png"
            :before-upload="beforeUploadImage"
            name="file"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="上传视频: ">
          <el-upload
            class="upload-demo"
            action
            accept=".mp4,.ogg,.flv,.avi,.wmv,.rmvb"
            :limit="1"
            :file-list="fileList"
            :show-file-list="true"
            :before-upload="beforeUploadVideo"
            name="file"
          >
            <el-button size="small" type="primary">点击上传视频</el-button>
            <span slot="tip" class="el-upload__tip">
              可上传视频文件格式: mp4/ogg/flv/avi/wmv/rmvb
            </span>
          </el-upload>
        </el-form-item>

首先我们要获取oss上传参数(页面加载就要获取)

 // 获取oss上传参数
    getOssParams () {
      formattingApi({ dirName: 'xly' }).then(response => {
        this.ossParamsObj = response  //ossParamsObj是对象格式的
      })
    },

上传oss文件方法

 upOssFile (resData, fileInfo) {
      // 拦截 XHR
      // if (XHR) window.XMLHttpRequest = XHR
      return new Promise((resolve, reject) => {
        let fileObj = new FormData()
        fileObj.append("OSSAccessKeyId", resData.OSSAccessKeyId)
        fileObj.append("accessKey", resData.accessKey)
        fileObj.append("bucket", resData.bucket)
        fileObj.append("expire", resData.expire)
        fileObj.append("host", resData.host)
        fileObj.append("key", resData.key + "/" + fileInfo.oGetTime)
        fileObj.append("policy", resData.policy)
        fileObj.append("signature", resData.signature)
        fileObj.append("file", fileInfo.file)
        fileObj.append("name", fileInfo.name)
        fileObj.append("type", fileInfo.type)
        fileObj.append("lastModifiedDate", fileInfo.lastModifiedDate)
        fileObj.append("size", fileInfo.size)
        axios.post(resData.host, fileObj).then(() => {
          resolve()
        }).catch(() => {
          reject()
        })
      })
    },

上传图片视频

  // 上传视频封面
    beforeUploadImage (file) {
      this.binary = file
      let oGetTime = new Date().getTime()
      this.upOssFile(this.ossParamsObj, {
        file: this.binary,
        name: file.name,
        type: file.type,
        lastModifiedDate: file.lastModifiedDate,
        size: file.size,
        oGetTime: oGetTime,
      }).then(() => {
        this.imageUrl = `${this.ossParamsObj.host}${this.ossParamsObj.key}/${oGetTime}`
        this.binary = null
      })
      return false
    },
    // 上传视频
    beforeUploadVideo (file) {
      this.binary = file
      let oGetTime = new Date().getTime()
      this.upOssFile(this.ossParamsObj, {
        file: this.binary,
        name: file.name,
        type: file.type,
        lastModifiedDate: file.lastModifiedDate,
        size: file.size,
        oGetTime: oGetTime,
      }).then(() => {       
        this.binary = null
        this.fileList.push({ name: file.name })
        this.videoUrl = `/${this.ossParamsObj.key}/${oGetTime}`
      })
      return false
    },

点击确定上传文件

// 点击确定上传
    imageVideoUpLoad () {
      if (!this.popTitle) {
        this.$message.error('请添加视频标题! ')
        return false
      }
      if (!this.imageUrl) {
        this.$message.error('请上传视频封面图片! ')
        return false
      }
      if (!this.videoUrl) {
        this.$message.error('请上传视频! ')
        return false
      }
      upLoadVideoApi({
        title: this.popTitle,
        picture: this.imageUrl,
        url: this.videoUrl,
      }).then(res => {
        this.dialogFormVisible = false
        this.$message.success('上传成功! ')
        this.getVideoList()
      })
    },

方法比较笨可能,不过上传oss是没有问题的,大家有更好的方法可以留言交流噢 !