解读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: "已取消删除"
      })
    
     });
   }
  },

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