获取文件名和后缀名， 并且修改el-upload上传文件名

/* 
 获取 文件名
*/

let IMG = "1235646SDANJFA45645665.jpg";
let reg = IMG.replace(/(.*/)*([^.]+).*/ig, "$2");
console.log(reg) //1235646SDANJFA45645665

//替换文件名 

let replaceFifle = reg.replace(reg, "准备替换的内容")
console.log(replaceFifle) //准备替换的内容

/* 
 获取 文件扩展
*/

let IMG = "1235646SDANJFA45645665.jpg";
let reg = IMG.split('.').pop();
console.log(reg); //jpg

//限制文件大小2MB以下，只能是jpg、png格式、宽高只能为1920*1820

beforeUpload(param){
  const isJPG = param.type === 'image/jpeg';
  const isPNG = param.type === 'image/png';
  const isLt2M = param.size / 1024 / 1024 < 2;

  if (!isLt2M) {
    this.$message.error('上传图片大小不能超过 2MB!');
  }
  if (isPNG || isJPG) {
    //执行代码.....
  }else{
     this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
   }

  const isSize = new Promise(function(resolve, reject) {
    let width = 320;
    let height = 320;
    let _URL = window.URL || window.webkitURL;
    let img = new Image();
    img.onload = function() {
      let valid = img.width == width && img.height == height;
      valid ? resolve() : reject();
    }
    img.src = _URL.createObjectURL(file);
  }).then(() => {
    return file;
  }, () => {
    this.$message.error('上传的图片宽高必须是320*320!');
    return Promise.reject();
  });

  return isJPG && isLt2M && isPNG;

},

//普通文件上传
uploadFile(param){
        this.file = param.file;
        this.key = param.file.name;
        let form = new FormData();
        form.append("file", this.file);
        form.append("key", this.key);
},

　　　　　　　　　　还有一种是input把type改成file。　　　

　　 　　　　　　　　　　　　<input
                            type="file"
                            name
                            value
                            @change="tirggerFile($event)"
                            id="hiddenInput"
                          />      

tirggerFile（event）{
     let file = event.target.files[0];
        this.files = file;
        this.keys = file.name;
        let param = new FormData();
        param.append("file", this.files);
        param.append("key", this.keys);
    //后面代码与upload类似，请求后端。略过。
}

 //修改el-upload上传文件名
 使用  beforeUpload 钩子函数，强制修改文件名
beforeUpload (file){
     const copyFile = new File([file],  '需要修改的名称');
   this.UploadFile(copyFile)
    return false
}

UploadFile(param){
       let params = new FormData();
        params.append("file", param);
        params.append("key", "key");  
       API.uploadRpx(params).then(res=>{
    
                //..........
       })
     
}   

批量上传文件，请求一次接口

<template>
  <div>
    <el-button type="primary" size="mini" plain @click="uploadImg"
      >确认上传</el-button
    >
    <el-button type="primary" size="mini" plain @click="fileList = []"
      >取消</el-button
    >
    <el-upload
      action="#"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :on-error="handleUploadError"
      :on-change="handleChange"
      :limit="limits"
      :auto-upload="false"
      :multiple="true"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>


<script>
import { uploadPic } from '@/api/asset'
export default {
  name: 'UploadPic',
  props: {
    limits: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [] // fileList数组
    }
  },
  methods: {
    handleRemove(file, fileList) {
      const picList = []
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].uid !== file.uid) {
          picList.push(this.fileList[i])
        }
      }
      this.fileList = picList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传失败
    handleUploadError() {
      this.$message({
        type: 'error',
        message: '上传失败'
      })
      this.loading.close()
    },
    handleChange(params) {
      const isLt2M = params.size / 1024 / 1024 < 2
      const isPNG = params.raw.type === 'image/png'
      const isJPEG = params.raw.type === 'image/jpeg'
      const isJPG = params.raw.type === 'image/jpg'
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return
      }
      if (isPNG || isJPEG || isJPG) {
        this.fileList.push(params)
        return false
      } else {
        this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
        return
      }
    },
    uploadImg() {
      if (this.fileList.length === 0) {
        this.$notify({
          title: '警告',
          type: 'warning',
          duration: 2000,
          message: '请选择图片进行上传'
        })
        return
      }
      this.loadingImg()
      const formData = new FormData()
      this.fileList.forEach(item => {
        formData.append('file', item.raw)
        console.log(item.raw)
      })
      // this.loading.close()
      // uploadPic(formData).then(res => {
      //   if (res.code === 200) {
      //     this.fileList = []
      //     this.$message.success({
      //       message: '上传成功',
      //       duration: 2000
      //     })
      //   }
      // })
      //   // eslint-disable-next-line handle-callback-err
      //   .catch(error => {
      //     this.$message.error('上传失败，请重新上传')
      //     this.loading.close()
      //   })
    },
    loadingImg() {
      this.loading = this.$loading({
        lock: true,
        text: '上传中...',
        background: 'rgba(0,0,0,0.7)'
      })
    }
  }
}
</script>




<style lang="scss" scoped>
// /* 推荐，实现简单 */
// /deep/.el-upload-list__item.is-ready {
//   display: none;
// }
</style>