解决el-upload上传文件需要修改文件名为唯一字符，否则阿里云无法匹配身份验证

写/修改/测试“上传文件/头像”功能大概两天了，期间出现了太多的问题，包括但不限于：上传时候无法带有参数、请求阿里云OSS无法返回正确的签名等等、前端上传成功然而后端数据库没有接收到文件等等…
记录下一个我碰到的典型问题：“element-ui 文件上传修改文件名，否则上传一样的文件名，数据库会自动销毁前一个文件，我现在碰到的问题是后端无法改变，所以只能在前端进行修正！”，认为我是解决的比较简单了，对比这些方法：
https://blog.csdn.net/bbs11007/article/details/118191226 这个感觉没有解决实际问题，还要后端还要进行操作！
https://www.cnblogs.com/0520euv/p/12419800.html 这个比较麻烦方法比较暴力！
下面记录下我的方法：

在成功获取后端签名等请求后

if (result.success) {
              console.log("获取上传成功");
              let onlyone = getOnylyOneCurrentTime()+"/"+that.FileList[0].name;
              console.log(typeof(onlyone));
              that.FileAction = result.data.privateHost;
              that.params.key =
                result.data.dir +
                competitionSetName +
                "/files/" +
                onlyone;
              that.params.OSSAccessKeyId = result.data.accessKeyId;
              that.params.policy = result.data.policy;
              that.params.signature = result.data.sign;
              that.$refs.upload_origin.submit();

其中getOnylyOneCurrentTime表示唯一值，这样碰到重名的文件Name概率降低了很多，满足目前系统的需求：

export function getOnylyOneCurrentTime() {
        //获取当前时间并打印
        var gettime;
    　　let yy = new Date().getFullYear();
    　　let mm = new Date().getMonth()+1;
    　　let dd = new Date().getDate();
    　　let hh = new Date().getHours();
    　　let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
    　　let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
    　　gettime = yy+''+mm+''+dd+''+hh+''+mf+''+ss;
    　　console.log(gettime) 
       return(gettime) 
    }

另外，基于阿里云的上传功能又有一个问题：如果上传的文件名字带有特殊字符，又会碰到一个问题：
无法指定/无法匹配！能上传，但是上传完以后就是下载不了！希望阿里以后能解决吧！

需要在前端进行修正：

beforeAvatarUpload(file, fileList) {
      // const isJPG = file.type === 'image/jpeg';
      var containSpecial = RegExp(
      /[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/
      );
      const name = containSpecial.test(file.name)
      const that = this;
      console.log(file);
      console.log(fileList);
      const isJPEG = file.raw.type === "image/jpeg";
      const isGIF = file.raw.type === "image/gif";
      const isJPG = file.raw.type === "image/jpeg";
      const isPNG = file.raw.type === "image/png";
      console.log(isJPEG, isGIF, isJPG, isPNG);
      const isLt2M = file.size / 1024 / 1024 < 2;
      this.userInfo.file = file.name;
      console.log("this.userInfo.file", this.userInfo.file);
      if (!(isJPG || isPNG || isJPEG || isGIF)) {
        this.$message.error("只能上传JPG 、JPEG 、GIF、 PNG格式的图片~");
        this.handleRemove();
      } else if (!isLt2M) {
        this.$message.error("上传的图片大小不能超过 2MB!");
        this.handleRemove();
      
      } else if(name){
        this.$message.error("上传的文件名字不能包含特殊字符!");
        this.handleRemove();//注意该功能你无法使用
      }
      else {
        that.originFileList = fileList;
        console.log("that.originFileList", that.originFileList);
      }
      return (isJPG || isJPEG || isGIF || isPNG) && isLt2M && name;
    },

这个可以拿过去直接用！！

简谈：
不知为何，太多人的看重可视化、前端。就像现在很火的元宇宙，之前搞过Unity, 参加过相关大赛、参与数字孪生平台建设后，我总觉得相关概念提出了好多年后但是实际产出却不是很多，很多东西都没有大家说的那么传奇，当然也可能是我刚入门的原因吧…
特别地，感觉现在前端能实现好多后端的工作，未来后端比重是否会慢慢降低这个还真不好说，比如我之前使用的谷歌Firebase，国内Parse、LeanCloud等都很不错，当然还有一些新兴的，例如我部门使用的这个平台说实话功能还比较不全+有些BUG。但我仍希望能参与到这个团队进行数据库+后端统一集成开发。