首页 > 其他分享 >vue如何回显已上传的文件并且修改

vue如何回显已上传的文件并且修改

时间:2022-09-07 16:25:22浏览次数:52  
标签:files 文件 vue 回显 fileList file 上传

我们知道当我们在表单里面上传多个文件时,我们希望将多个文件和表单中的对象一起传给后端,这时我们传给后端的文件就是file数组。而我们想要回显已上传的文件,应该是拿不到那个file数组的,所以我们可以让后端返回给我们之前上传的多个文件的信息,比如说id,文件名字等。

在这里定义一个上传组件,重新给我封装一下数据

<el-form-item>
          <el-upload
            class="upload-demo"
            action="#"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :file-list="UploadedfileList">
            <h2>{{ $t("lang.portaldata.uploadedFileList") }}</h2>
          </el-upload>
        </el-form-item>

data里面定义一下

UploadedfileList:[],

  点击修改按钮的时候给它赋一下值

getFileList(this.dataId).then(res=>{
                  
                  if(res.code == 200){
                    this.UploadedfileList = res.rows
                    console.log("返回的文件",this.UploadedfileList)
                    for(let one of this.UploadedfileList){
                      one.name = one.fileName
                    }
                    
                  }
                }).catch()

  当我们想要删除回显的文件列表时,定义一下删除方法

handleRemove(file, fileList) {
              console.log(file, fileList);
              
              fileList = fileList.filter((item)=>{
                
                  return item.name !== file.name;
              }); 
            },
            
            beforeRemove(file, fileList) {
              if (this.$i18n.locale == "zh") {
                return this.$confirm(`确定移除 ${ file.name }?`);
              } else if (this.$i18n.locale == "en") {
                return this.$confirm(`are you sure delete ${ file.name }?`);
              }
              
            },

这样的话我们就可以回显已上传的文件列表。但是这些回显的文件是只能删除不能增加的,可以将修改之后的id给后端,比如说"1,2,3"这样的格式,然后后端去判断对比数据库中已上传文件的id然后手动删除。

用户点击修改按钮不光想回显已上传的文件,可以还想新增文件,所以我们在上面那个回显已上传文件的组件旁边再定义一个组件,这个传给后端的就是file数组了

<el-form-item  prop="files">
            <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-change="uploadFiles"
            :multiple="true"
            :file-list="fileList"
            >
            <div v-for="filename in fileList">{{filename}}</div>
            
            <el-button size="mini" type="primary" icon="el-icon-upload2"
                >{{ $t('lang.information.UDF')}}
            </el-button>
            </el-upload>
        </el-form-item>

定义一下on-change方法

uploadFiles (item,fileList) {
              this.form.files = fileList
              console.log("打印上传文件详情",fileList)
              
            },

  提交的时候把数组中的file对象拿到封装到数组里面

if(this.form.files != null){                         this.form.files.forEach(file => formData.append('files', file.raw))                       } 后端controller用files就能接收到了
@RequestParam(value = "files", required = false) MultipartFile[] files

  

标签:files,文件,vue,回显,fileList,file,上传
From: https://www.cnblogs.com/sgj191024/p/16665952.html

相关文章

  • vue-puzzle-vcode与vue-drag-verify纯前端的拼图人机验证、右滑拼图验证
    转载作品!以获取原作者允许,原文地址,感觉写的比较全面,也比较实用,大家可以去看看原文章;纯前端的拼图人机验证、右滑拼图验证1、vue-puzzle-vcodegithub地址:https://github......
  • TinyMCE粘贴word图片且图片文件自动上传功能
    ​ 1.编辑器修改(可选)1.1在 ueditor/config.json 中添加代码块    /* 上传word配置 */    "wordActionName":"wordupload",/* 执行上传视频的action......
  • vue 正则 密码校验
    password:[/*{validator:checkPassword,trigger:'blur'}*/{pattern:/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&,.*]).{8,19......
  • Vue初学
    1.什么是“插值表达式”1.1语法插值表达式可以理解为:使用大括号来包裹JS代码作用:将大括号中的数据替换成对应属性值进行展示。PS:双大括号语法也称为模板语法(mustache语......
  • eWebEditor粘贴word图片且图片文件自动上传功能
    ​ 百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,...ueditor实现word文档的导入和下载功能的方法:1、UEditor没有提供word的导入功能,只能说是粘贴复......
  • 下载微信文件图片音频视频并上传到OSS
    需求背景:企业微信的文件图片音频视频都需要在本系统,不能放微信存着框架:.NET6系统:Windows10,WindowsServer2016企业微信接口微信消息类型枚举类///<summary>......
  • React版/Vue版都齐了,开源一套【特别】的后台管理系统...
    本项目主要基于Elux+Antd构建,包含React版本和Vue版本,旨在提供给大家一个简单基础、开箱即用的后台管理系统通用模版,主要包含运行环境、脚手架、代码风格、基本Layout、状态......
  • Taurus.MVC-Java 版本打包上传到Maven中央仓库(详细过程):3、Maven独立插件安装与setting
    文章目录:Taurus.MVC-Java版本打包上传到Maven中央仓库(详细过程):1、JIRA账号注册Taurus.MVC-Java版本打包上传到Maven中央仓库(详细过程):2、PGP下载安装与密钥生成发布Tau......
  • 上传图片
    上传图片的方法在上传文件的时候需要知道其原理,因为我们的数据库是无法存储数据的,所以我们只能使用地址来找,所以数据库中应该村的是文件路径其次上传图片是属于上传文件的......
  • vue3异步组件使用
    场景一:当我们在模版中,需要根据模版当前作用域的数据,去做异步的操作时候。白话一点:表格的第二列要展示的数据是根据第一列的数据去请求接口得到。在组件模版中<Suspens......