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测试数据/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: "已取消删除"
? ? ? ? ? ? })
? ? ? ? ??
? ? ? ? ? });
? ? ? }
? ? },
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
查看更多关于解读element el-upload上传的附件名称不显示 file-list赋值的详细内容...