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"
>点击上传</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: "已取消删除"
})
});
}
},
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
