您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 328人已围观

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

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来阻止文件移除操作。

读入数据

代码如下（示例）：

点击上传

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

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

您可能感兴趣的文章: