2021-08-26

**

element ui upload 实现多个文件（图片和视频）同时上传功能

**

1.elementui中的upload实现多个图片和视频文件上传，请求一次接口 `

<template>
  <div>
   <div class="uploadFile">
      <el-upload
      ref="upload"
      class="upload-demo"
      action=""
      :on-change="handleChange"
      :data="uploadData"
      :on-preview="handlePreview"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-error="handleImageError"
      :file-list="fileList"
      :show-file-list="true"
      :multiple="true"
      :before-upload="beforeUploadPicVideo"
      auto-upload="false"
      list-type="picture"
    >
      <el-button size="small" type="primary">上传文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" >上传到服务器</el-button>
    </el-upload>
   </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [],//接收文件的参数
      uploadData: {},//上传时附带的额外参数
      fileData: '',//接收上传成功返回的数据
    };
  },
  //方法集合
  methods: {
     handleClose() {
      this.visible = false;
      this.$refs.upload.clearFiles()
    },
    handleChange(file, fileList) {
       this.fileList = fileList
    },
    beforeUploadPicVideo(file) {
      const typeAll = file.type.split("/");
      if(typeAll[0] === 'video'){
         //视频
         const isLt80M = file.size / 1024 / 1024 < 80
      if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
          this.$message.error('请上传正确的视频格式');
          return false;
      }
      if (!isLt80M) {
          this.$message.error('上传视频大小不能超过80MB哦!');
          return false;
      }
      }else{
         //图片
         // const isAccept = 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/gif'
         const isLt10M = file.size / 1024 / 1024 < 10
         if(['image/jpeg','image/jpg','image/png','image/gif'].indexOf(file.type) === -1){
            this.$message.error('上传图片只能是png、jpg、jpeg、gif格式的图片！')
            return false
         }
         if(!isLt10M){
            this.$message.error('上传图片的大小不能超过10M')
            return false
         }
      }
    },
    //上传到服务器
    submitUpload(){
      // this.$refs.upload.submit();  // 提交调用uploadFile函数
      //判断是否有文件再上传
      if (this.fileList.length === 0) {
          return this.$message.warning('请选取文件后再上传')
      }
      // 下面的代码将创建一个空的FormData对象:
      const formData = new FormData()
      // 也可以使用FormData.append来添加键/值对到表单里面；
      this.fileList.forEach((file) => {
          formData.append('file', file.raw)
      })
       console.log('formData',formData);
      //自定义的接口也可以用ajax或者自己封装的接口
      this.imgUpload(formData).then(res =>{
         console.log('上传',res);
          if (res.code === 1) {
            // 合并图片类表和视频列表数组
            // this.fileData = res.data.imgList.concat(res.data.vidList)
            this.fileData = res.data.imgList
            this.$emit('file-data',this.fileData)
            this.$message({
             showClose: true,
             message:`${res.msg}`,
             type:'success',
            })
            this.visible = false;
          } else {
            this.$message({
             showClose: true,
             message:`${res.msg}`,
             type:'error',
            })
          }
          // 清空fileList
          this.fileList = []
      }).catch(err =>{})
     
    },
    handleSuccess(res,file){
      if(res.url !== ''){
        this.$message({
            showClose: true,
            message:'上传成功',
            type:'success',
          })
      }else{
        this.$message.error('上传失败')
      }
    },
    handleRemove(file, fileList) {
       this.fileList.map((val,index) =>{
          if(val.uid === file.uid){
             this.fileList.splice(index,1)
          }
       })
    },
    handleImageError(err, file, fileList) {
      console.log('file',file);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`)
    },
    handlePreview(file) {
        console.log(file);
    },
  },
};
</script>
<style lang="scss">
.uploadFile{
   width:500px;
   height:350px;
   overflow-y: auto;
   border: 1px solid aqua;
}
</style>

`