elementui上传文件不允许重名

需求:
用户可以多文件上传 ,在上传到服务器之前需要检查服务器中有无重名的文件,如果有会返回重名文件的名称数组,这些文件需要一个一个的向用户确认是否要覆盖重传。确认完毕后再上传到服务器。

检查文件重名:

	//上传文件
    uploadFile() {
      let _this = this;
      // 未选择文件
      if (_this.fileLength === 0) {
        _this.$message({
          message: '请先选择 [文件] 后在点击上传!',
          type: 'warning'
        });
        return;
      }

      // 检查重名文件
      let fileListForm = new FormData();
      let noUploadFileList = []; //不覆盖上传的
      const arrayList = _this.fileList.map(file => file.name);
      console.log("将要上传的文件名:", arrayList);
      arrayList.forEach(fileName => {
        fileListForm.append("file_name", fileName); 
      });
      let fileListConfig = {
        method: 'post',
        url: _this.checkFiles,
        headers: {
          "Content-Type": "multipart/form-data;charset=utf-8",
        },
        data: fileListForm
      };
      _this.$ajax(fileListConfig)
        .then(async res => {
          console.log("检查是否重复:", res.data);
          let repeatArray = res.data; // 后端返回重复文件名数组
          if (repeatArray.length > 0) {
            for (const file of repeatArray) {
              await _this.deleteRepeat(file, noUploadFileList);
            }
          }
          console.log("noUploadFileList:", noUploadFileList);
          //进行上传
          //删除不覆盖上传的文件
          _this.fileList = _this.fileList.filter(file => !noUploadFileList.includes(file.name));
          console.log("新的上传列表:", _this.fileList);
          _this.fileLength = _this.fileList.length;
          if (_this.fileLength === 0) {
            return;
          }
          //进行上传
          await _this.performUpload();
        })
        .catch(err => {
          console.log(err);
        });
    },

异步函数,一个一个文件的确定用户哪些需要覆盖上传,

//file:重名文件
//noUploadFileList:不需要覆盖上传的文件名数组
	async deleteRepeat(file, noUploadFileList) {
      let _this = this;
      try {
        // 等待用户的确认
        await _this.$confirm(file + '文件已上传至服务器, 是否覆盖上传?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        // 如果await下面的代码执行了,意味着用户确认覆盖
        _this.$message({
          type: 'success',
          message: '覆盖文件成功!'
        });
      } catch (error) {
        // 如果进入catch块,意味着用户点击了取消
        _this.$message({
          type: 'success',
          message: '已取消文件覆盖!'
        });
        noUploadFileList.push(file);
      }
    },

上传服务器:

	performUpload() {
      let _this = this;
      // 配置请求的相关参数
      //loading开启
      _this.is_loading = true

      //配置请求的相关参数
      let formData = new FormData()
      let config = {
        method: 'post',
        url: this.uploadUrl,
        headers: {
          "Content-Type": "multipart/form-data;charset=utf-8",
        },
        data: formData
      }
      console.log("正在上传:", _this.fileList);
      //单个文件,可编辑作者和文件密级
      if (_this.fileLength === 1) {
        formData.append("file", _this.fileList[0].raw)
        formData.append("author", _this.edit_author)
        //默认编写人为空,密级为非密
        if (_this.secret_level === '') {
          _this.secret_level = 0
        }
        formData.append("confidentiality", _this.secret_level)
      }
      //多文件
      if (_this.fileLength > 1) {
        _this.fileList.forEach(file => {
          formData.append("file", _this.fileList.raw)
          formData.append("author", _this.edit_author)
          formData.append("confidentiality", 0)
        })
      }
      //请求后端
      _this.$ajax(config)
        .then(res => {
          // console.log(res)
          if (res) {
            _this.is_loading = false
            _this.is_done = true
            if (_this.is_done) {
              console.log("上传成功!!!!!");
              _this.$message({
                message: '上传成功',
                type: 'success'
              });
              _this.fileList = []
              _this.show = true
            }
            _this.edit_author = ''
            _this.secret_level = ''
          } else {
            _this.is_loading = false
            _this.$message.error('后台连接错误');
            _this.fileList = []
            console.log("res failed")
          }
        })
        .catch(err => {
          _this.is_loading = false
          _this.$message.error('后台连接错误');
          console.log(err)
        })
    },
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Java中实现文件上传重名的方法有多种方式,下面介绍两种常见的方法。 第一种方法是通过在文件名后添加随机字符串或时间戳来确保文件不重名。可以使用`java.util.UUID`类生成唯一的随机字符串,或使用`java.time`包中的相关类获取当前时间戳作为文件名的一部分。示例如下: ```java import java.util.UUID; String originalFileName = "example.txt"; String fileExtension = originalFileName.substring(originalFileName.lastIndexOf(".")); String newFileName = UUID.randomUUID().toString() + fileExtension; // 上传新文件,使用newFileName作为文件名 ``` 第二种方法是使用文件名的哈希值作为文件名的一部分。可以使用`java.security.MessageDigest`类来计算文件名的哈希值,然后将其与原始文件名拼接成新的文件名。示例如下: ```java import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; String originalFileName = "example.txt"; String fileExtension = originalFileName.substring(originalFileName.lastIndexOf(".")); String hash = ""; try { MessageDigest md = MessageDigest.getInstance("MD5"); md.update(originalFileName.getBytes()); byte[] digest = md.digest(); StringBuilder sb = new StringBuilder(); for (byte b : digest) { sb.append(Integer.toHexString((b & 0xFF) | 0x100).substring(1, 3)); } hash = sb.toString(); } catch (NoSuchAlgorithmException e) { e.printStackTrace(); } String newFileName = hash + fileExtension; // 上传新文件,使用newFileName作为文件名 ``` 以上是两种常见的实现方式,可以根据具体的需求选择适合的方法来确保文件上传重名
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值