解读element el-upload上传的附件名称不显示 file-list赋值

 更新时间:2022年10月08日 09:59:29   作者:杰瑞LJ  
这篇文章主要介绍了解读element el-upload上传的附件名称不显示 file-list赋值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

element el-upload上传的附件名称不显示 file-list赋值

问题

上传附件后 文件名字不显示

解决

1、首先看file-list 是否在data中定义

2、如果定义了,文件名字还是不显示,在获取数据之后,把文件名字push到fileList中去,给name值赋值就可以显示了。

this.fileList.push({
  name: '',
  url:''
 });

el-upload上传附件-总结

提示:小编今天介绍一下 用FormData 结合 el-upload 实现上传文件

提示:以下是本篇文章正文内容,下面案例可供参考

FormData是什么?

传统的文件上传方式是提交form表单,今天使用了 formdata 所以想好好研究一下

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,

并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,

本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”,它会使用和表单一样的格式。

提到了 “可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去” 那不是ajax吗

那么我们就用ajax来实现文件上传吧!!

使用FormData.append()添加属性

使用步骤

使用 Element-ui 中的el-upload 最终实现

通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。

读入数据

代码如下(示例):

   <el-upload
            style="width: 579px"
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
             :http-request="http_request"  // 上传
            :on-preview="handlePreview"  
            :before-remove="beforeRemove"  // 删除
            multiple
            :on-exceed="handleExceed"  // 限制
            :file-list="fileList"   // 生成
          >
            <el-button size="small" class="button2" style="150px;"
              >点击上传</el-button
            >
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
   </el-upload>

点击http_request 这里结合使用 FormaData

 var formData = new FormData();
      formData.append("file", params.file);
      formData.append("fileName", params.file.name);
      formData.append("tenantId", sessionStorage.getItem("id"));

接着把formadata 作为Ajax 的参数 提交 即可

  this.ajax= ({
         url: '请求地址',
         data: formData,
         method: 'post',
         headers: { 
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Auth-Token": sessionStorage.getItem("token"),
         }
})
 .then(() => { 
    调用方法一半情况是调用查询附件详情接口(详情的方法查询到的数据赋值到:file-list 中即可 )
})

删除附件:

    beforeRemove(file, fileList) {
       if (file && file.status === "success") {
        this.$confirm("您确定要删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          confirmButtonClass: "butText",
          type: "warning",
          center: true
        })
          .then(() => {
              this.$axios({
                method: "post",
                url:
                headers: {
                  "Content-Type": "application/json",
                  Accept: "application/json",
                  "X-Auth-Token": sessionStorage.getItem("token"),
                },
              })
              .then(res => {
                // console.log(res);
                this.query_attachment();
          
                  this.$message({
                    type: "success",
                    message: "删除成功!"
                  });
       
              })
              .catch(err => {
                console.log(err);
              });
          })
          .catch(() => {
            this.query_attachment();
            this.$message({
              type: "info",
              message: "已取消删除"
            })
          
          });
      }
    },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue常用知识点整理

    vue常用知识点整理

    Vue是一套用于构建用户界面的渐进式JavaScript框架。这篇文章整理了vue中的常用知识点,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 在项目vue中使用echarts的操作步骤

    在项目vue中使用echarts的操作步骤

    这篇文章主要介绍了在项目vue中使用echarts的操作步骤,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vite打包拆分js和css的配置指南

    vite打包拆分js和css的配置指南

    这篇文章主要给大家介绍了关于vite打包拆分js和css的配置指南,Vite是一个非常快速的工具,它可以帮助你打包JavaScript文件,需要的朋友可以参考下
    2023-09-09
  • VUE实现大转盘抽奖

    VUE实现大转盘抽奖

    营运三宝(九宫格、大转盘、老虎机,当然此三宝当然是最基础的营销运营手段),本片文章聊聊大转盘,转盘的实现逻辑应该是营销方案较为简单的一种了,本文将介绍如何实现大转盘抽奖,感兴趣的朋友可以参考下
    2021-05-05
  • three.js实现vr全景图功能实例(vue)

    three.js实现vr全景图功能实例(vue)

    去年全景图在微博上很是火爆了一阵,正好我也做过一点全景相关的项目,下面这篇文章主要给大家介绍了关于three.js实现vr全景图功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • webpack + vue 打包生成公共配置文件(域名) 方便动态修改

    webpack + vue 打包生成公共配置文件(域名) 方便动态修改

    这篇文章主要介绍了webpack + vue 打包生成公共配置文件(域名) 方便动态修改,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 浅谈VUE防抖与节流的最佳解决方案(函数式组件)

    浅谈VUE防抖与节流的最佳解决方案(函数式组件)

    这篇文章主要介绍了浅谈VUE防抖与节流的最佳解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 如何在Vue项目中使用axios请求

    如何在Vue项目中使用axios请求

    这篇文章主要介绍了如何在Vue项目中使用axios请求,对Vue感兴趣的同学,可以参考下
    2021-05-05
  • Vue实现DOM元素拖放互换位置示例

    Vue实现DOM元素拖放互换位置示例

    本文主要介绍了Vue实现DOM元素拖放互换位置示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    基于Vue实现tab栏切换内容不断实时刷新数据功能

    在项目开发中遇到这样需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,实现方法其实很简单的,下面小编给大家带来了基于Vue实现tab栏切换内容不断实时刷新数据功能,需要的朋友参考下吧
    2017-04-04

最新评论