El-upload上传文件回显文件名时,文件名不正常显示,怎么办?

项目中有个需求是“编辑修改”已经上传入库的信息,文件名是从后端获取的(由于一次只要求上传一个文件,所以每次返回的文件名只有一个),现在我已经将文件名回显出来了,可是问题来了:

文件列表中凡是含有 小写的“x” 的文本,都不正常显示,怎么办呢?

问题如图:


代码如下:

请能者赐教,谢谢!

我猜文件名是正常的,你刚好写了一个图标,覆盖到它上面了,元素检查一下看看?

首先检查返回的信息是不是正确,第二检查你的文件的编码是不是正确,再是不是有其他的样式或者图标遮挡

并没有写这个图标,亲

返回的信息正确,没有其他的图标,编码的话……怎么检查呢?

1.查看模板html是不是有这句话,2.打开编辑器,查看文件的编码是不是utf-8

标签的会过滤掉,只能这样发出去了meta charset=“UTF-8”

编码是:content=“text/html; charset=utf-8”

好像没啥问题,你单个文件的编码对不对

好吧。。。应该可以获取到上传列表,自己写一个列表展示,不用上传组件自带的列表

为了满足需求,你说的这两种列表展示方式在这里我都用了,el-upload自带的列表展示没问题,一旦让自带的列表隐藏,显示我自己写的列表时,就出现以上问题了。

之所以两个列表都用,是因为一开始进入这个弹框时,要将从后端取到的文件名回显到el-dialog里,接下来,还得满足用户修改上传文件时,将上传的文件名展示到文件列表里。

我的实现大体思路是:
初始化这个dialog的时候,将从后端取到的文件名通过自定义列表的方式回显展示出来,当用户修改文件,再次上传时,将刚刚上传的文件名通过el-upload自带的列表回显展示出来。

这么实现,的确很麻烦,不然……那怎么把从后端取到的文件名回显到el-dialog里呢?

vue是单页面应用,只要在全局定义的编码格式是UTF-8,应该就不是编码格式的问题了吧(我也只是猜测哈),不然还要给某一个"XXX.vue"文件定义编码格式。。。

打开你的编辑器,看一下这个编码,每个文件都有的,如果是其他编码就可能会乱码

我的这个也是utf-8的

%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87%E7%BC%96%E8%BE%91_20190612174147

你走弯路了,this.editLeaveForm.fileList.push({
name:“后台给的文件名”,url:“xxxx”
}),就能回显了,vue都是操作数据的。

那这个就不知道是什么原因了,但是看你上面的回复,你走了弯路。

当初考虑这个了,比较困惑那个url,因为后端没给。
那如果这么写的话,那个文件的url是不是后端给的文件流啊?

如果不用点击下载的话,url随便给个字符串就行了,只是一个占位作用,如果没有url这个字段应该也能回显的

谢谢您了,您提供的这个思路我会去尝试的。不过,我还是期待:

万一有别的思路来解决目前我遇到的这个问题呢
(实在不行,我再大刀阔斧的去换思路、改代码,嘿嘿~)

毕竟功能已经实现了,就差最后这点儿样式了【悲催】