js 修改上传文件的文件名

# 前言

用户图片保存在一个文件夹，当有一天用户上传了文件名一样内容不一样的图片时，后面上传的图片是会把前面同名的图片覆盖掉，这个很不符合业务逻辑，所以需要修改文件名，防止出现图片覆盖掉的情况，修改上传文件名 前端 和 后端 都可以修改，这篇博客记录的是前端修改文件名;

# 修改上传文件的文件名

methods: {
        uploadFile(file) {
          if (file.length !== 0) {
            // 此时可以自行将文件上传至服务器
            let fileName = file.name;  // 保存文件名
            let fileName2 = fileName.split('.');  // 对文件名进行切割
            //var renameFile =new File([原文件], 新文件名,文件类型);
            var renameFile =new File([file], this.time(new Date()) + '.' + fileName2[1],{type:file.type});

            var formdata = new FormData();
            formdata.append('file', renameFile);
            axios({
              url: '服务器上传文件url',
              method: 'post',
              data: formdata,
              headers: { 'Content-Type': 'multipart/form-data' },
            }).then((res) => {
              if (res.data.code === 200) {
                this.$toast('发布成功');
              }
            });
          } else {
            this.$toast('请上传图片');
          }
        },
        time(time) {
          let month = time.getMonth() + 1;  // 月
          let date = time.getDate();  // 日
          let hh = time.getHours();  // 时
          let mm = time.getMinutes();  // 分
          let ss = time.getSeconds();  // 秒
          if (hh >=0 && hh<10){hh= '0' + hh;}
          if (mm >=0 && mm<10){mm= '0' + mm;}
          if (ss >=0 && ss<10){ss= '0' + ss;}
          if (month < 10){month= '0' + month;}
          if (date < 10){date= '0' + date;}
          return time.getFullYear().toString() + month.toString() + date.toString() + hh.toString() + mm.toString() + ss.toString();
        },
      }

原理就是 new 一个新的文件， 达到修改文件名的目的;

修改后的文件名是按时间格式来命名的 20191211114210.jpg，可以理解为 2019/12/11/11/42/10

参考博客：

1. js 中的File不能修改文件名的问题
2. JS字符串分割截取