解读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: "已取消删除"
})
});
}
},以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
