elementui上传文件不允许重名的解决方案

 更新时间:2024年02月06日 11:20:01   作者:Violet_Stray  
用户可以多文件上传 ,在上传到服务器之前需要检查服务器中有无重名的文件,如果有会返回重名文件的名称数组,这些文件需要一个一个的向用户确认是否要覆盖重传,这篇文章主要介绍了elementui上传文件不允许重名,需要的朋友可以参考下

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)
        })
    },

ELEMENT UI --UPLOAD组件,上传的文件名后缀重复问题

在使用Element UI 的Upload组件,发现上传的文件名后缀是重复的。(eg. test.pdf.pdf)

在检查了相关组件的使用,没有任何问题,最后发现是windows电脑自动会隐藏文件扩展名,导致用户以为文件没有扩展名,继续修改成带后缀的文件名导致。

可以点击文件--查看--勾选扩展名,既可避免此类错误发生。

到此这篇关于elementui上传文件不允许重名的文章就介绍到这了,更多相关elementui上传文件不允许重名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目打包解决静态资源无法加载和路由加载无效(404)问题

    vue项目打包解决静态资源无法加载和路由加载无效(404)问题

    这篇文章主要介绍了vue项目打包,解决静态资源无法加载和路由加载无效(404)问题,静态资源无法使用,那就说明项目打包后,图片和其他静态资源文件相对路径不对,本文给大家介绍的非常详细,需要的朋友跟随小编一起看看吧
    2023-10-10
  • 优化Vue页面中的表单布局和样式的技巧

    优化Vue页面中的表单布局和样式的技巧

    在日常开发中,Vue 项目中的表单布局和样式优化是一个重要的环节,通过合理的布局与美观的样式设计,不仅可以提升用户体验,还能增加页面的实用性和观赏性,本文将总结几个常见的表单和表格布局优化的技巧,需要的朋友可以参考下
    2024-10-10
  • uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内(推荐)

    uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内(推荐)

    我在做uniapp项目时,用的uni-file-picker组件,这是我做的一个项目实例,主要是将图片通过接口传至后台服务器,本文给大家分享uniapp组件uni-file-picker中对上传的图片进行压缩再上传,感兴趣的朋友跟随小编一起看看吧
    2022-11-11
  • 如何管理Vue中的缓存页面

    如何管理Vue中的缓存页面

    这篇文章主要介绍了如何管理Vue中的缓存页面,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-02-02
  • nuxt中刷新页面后防止store值丢失问题

    nuxt中刷新页面后防止store值丢失问题

    这篇文章主要介绍了nuxt中刷新页面后防止store值丢失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue awesome swiper异步加载数据出现的bug问题

    vue awesome swiper异步加载数据出现的bug问题

    这篇文章主要介绍了vue awesome swiper异步加载数据出现的bug问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Vue中computed及watch区别实例解析

    Vue中computed及watch区别实例解析

    这篇文章主要介绍了Vue中computed及watch区别实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • Vue前端路由hash与history差异深入了解

    Vue前端路由hash与history差异深入了解

    这篇文章主要为大家介绍了Vue前端路由hash与history差异的深入了解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Vue框架下引入ActiveX控件的问题解决

    Vue框架下引入ActiveX控件的问题解决

    这篇文章主要介绍了Vue框架下引入ActiveX控件的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 一文了解Vue中的nextTick

    一文了解Vue中的nextTick

    Vue中的 nextTick 涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下。其中关于 nextTick 的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下 nextTick
    2019-05-05

最新评论