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

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

1.templete代码

// 图片
<div
  v-if="images"
  v-for="(url, img_index) in images"
  :key="img_index"
  class="img_hover"
>
  <el-image
     style="width: 100px; height: 100px"
     :src="url"
     :preview-src-list="[url]"
     fit="cover"
  >
  </el-image>
</div>
// 视频
<div
  v-if="videoSrc"
  class="img_hover"
>
  <video
     :src="videoSrc"
     v-if="videoSrc"
     controls
     class="upload_video"
  ></video>
</div>
<div v-if="images">
   <div v-if="!(images.length == 9)">
      <el-upload
          action=""
          :before-upload="beforeAvatarUpload"
          :http-request="fnUploadRequest"
          :show-file-list="false"
          v-if="!videoSrc"
          :on-success="handleSuccess"
          :on-progress="handleProgress"
          list-type="picture-card"
          style="position: relative"
          :disabled="percentageShow ? true : upload_disabled"
      >
          <i class="el-icon-plus"></i>
          <div class="upload_text" v-if="percentageShow">上传中</div>
      </el-upload>
</div>
<div v-else>
      <el-upload
          action=""
          :before-upload="beforeAvatarUpload"
          :http-request="fnUploadRequest"
          :show-file-list="false"
          v-if="!videoSrc"
          :on-success="handleSuccess"
          :on-progress="handleProgress"
          list-type="picture-card"
          style="position: relative"
          :disabled="percentageShow ? true : upload_disabled"
      >
          <i class="el-icon-plus"></i>
          <div class="upload_text" v-if="percentageShow">上传中</div>
      </el-upload>
</div>

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];
    }
  }
},

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

<el-upload
    :action="action" //action是你的接口url
    name="img" // 这里可以换成你需要的
    :show-file-list="false"
    :on-success="handleSuccess"
    :on-progress="handleProgress"
    :before-upload="beforeAvatarUpload"
    :headers="{ 'authorization': '你的token' }"
>
    <el-button
              size="small"
              type="primary"
              style="width: 15%; margin-left: 5%"
              class="avatar_button"
    >上传
    </el-button>
</el-upload>






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) {
      
},