element-ui中上传组件的使用（el-upload）

我用这个是既能上传图片，同时可以上传视频 ( 因为我们上传图片走的自己的接口，上传视频走的时候oss，所以这样写，如果你们上传图片上传视频都走的接口，可以看最后光上传图片的方法,就能做到，因为我刚开始就是全走的接口，接口上传视频太慢，才换成直传oss )

1.templete代码

// 图片

  
  

// 视频

  


   

      
          
          
上传中
      


      
          
          
上传中
      

2. data数据源

videoSrc: "",
images: [],
percentageShow: false,
upload_disabled: false,
image_png: true,

3. methods

// 上传之前
beforeAvatarUpload(file) {
  // console.log('上传之前', file.type)
  if (file.type.split('/')[0] === 'image') {
      const isJPG = file.type === 'image/png';
      if (!isJPG) {
          this.$message.warning("请上传png格式图片");
      } else {
          this.image_png = false
      }
      return isJPG;
  }
  const isJPG = file.type.split('/')[0] === 'video';
  if (!isJPG) {
      this.$message.warning("请上传视频或图片");
  } else {
      this.image_png = true
  }
  return isJPG;
},


// 自定义上传走的方法
async fnUploadRequest(option) {
   var _oss = oss;
   var that = this;
   // console.log(option, this.image_png)
   if (this.image_png) {
      // console.log('oss上传视频')
      // 该方法为自己定义的oss上传方法,详情可以看我的 oss直传视频 这篇文章有oss上传视频的方法
      _oss.ossUploadFile(option);
   } else {
      // console.log('上传图片')
      that.uploadFile(option.file);
   }
},


// 图片上传的函数(走的后端接口)
uploadFile(file) {
   // console.log(file)
   let formData = new FormData();
   formData.append('img', file);
   var that = this;
   that.percentageShow = true;
      this.$axios.post('你的接口url', formData, {
        // 你需要加的请求头,下面是我加的,可以参考
        headers: {
          'authorization': '你的token',
          'Content-Type': 'multipart/form-data'
        }
      }).then(function (res) {
        // console.log(res);
        if (res.data.code == 200) {  //成功的话将图片插入数组中
          // console.log(res.data.data)
          if (!that.images) {
            that.images = [];
          }
          that.videoSrc = "";
          that.images.push(res.data.data);
          that.percentageShow = false;
        } else {
          that.$message(res.data.msg)
        }
      }).catch(err => {

      })
},

// 上传过程中
handleProgress() {
  this.percentageShow = true;
},

// oss上传视频成功后
// 上传成功后
handleSuccess(response, file, fileLis) {
  // console.log('true视频上传成功后，false图片上传成功之后', this.image_png)
  // console.log(response, file, fileLis);
  // console.log("url", window.url);
  if (this.image_png) {
    if (window.url) {
       this.url = window.url.res.requestUrls;
       this.percentageShow = false;
       this.images = [];
       this.videoSrc = this.url[0].split("?")[0];
    }
  }
},

这个是用插件自带的只上传图片

    上传
    







beforeAvatarUpload(file) {
   const isJPG = file.type.split('/')[0] === 'image';
   if (!isJPG) {
      this.$message.warning("请上传图片");
   }
   return isJPG;
},
handleSuccess(response, file, fileLis) {
   console.log(response.data);
},
handleProgress(event, file, fileList) {
      
},