还是el-upload的坑,文件名的显示

由于前面说的,
文件列表不能使用,
只能自己写个显示文件行的东西,
现在出问题了:
在编辑的时候,
出现了文件名字,但是部署到服务器上之后,
却出现不了文件名。

为什么?
部署的服务器有问题吗?
不,是缓冲的问题。

在上传文件的时候,
有一个file.name会让你快乐,
但是如果你用file.name显示文件名,
这就会出现不真实的快乐,
暂存的文件名会让文件名显示出一会,
但是当刷新的时候就会,
使得file.name变成空,
在这里插入图片描述
应该用后端传过来的数据xxx.jpg,
不只是缓存里的数据,
刷新后也可以存在,不像el-upload的file.name只是一个暂时存在的数据

<el-link type="primary">{{educerurl}}</el-link>

在before-upload方法里写上

<div v-if="test_show">
	//file.name部分
	//删除按钮部分
</div>
//调用上传方法时
this.$api.TestPage.uploadFile(fd).then((res)=>{
					this.educerurl = res.url;//这个后端传过来的值就不是暂时缓存的数据		
					this.show_test = true
				});

同时还有逻辑,
在后端传过来的数据为空的时候,
就把

<div v-if="test_show">
	//file.name部分
	//删除按钮部分
</div>

问题:
会出现编辑时值出现一个删除按钮,文件名是没有的
在这里插入图片描述
1、我判断一下是文件的名字没有还是名字有时没有显示文件名
【通过前端的netWork查看】
一打开页面时有一个showPage方法,
点进去可以看到
在这里插入图片描述
content里面有数据,
点开发现数据里这个url是空的时候,
显示空文件名和一个显示出的删除按钮
在这里插入图片描述
在这里插入图片描述
【后来我恍然大悟,原来显示的时候,“”空的时候也给它显示出来了,
这可太秀了】
于是,我做出了限制
在这里插入图片描述
就可以组织url为空时文件的空白名显示,
后面再netWork的时候发现,另一个url不存在时,是null不是“”,
咳,后端格式不对,能怎么办,宠着呗

2、一开始我以为是自己的删除按钮和文件名部分不受一个div的v-if控制,
后来用两个div控制,

<div v-if="test_show">
	//file.name部分
	//删除按钮部分
</div>
<div v-if="test_show">
	//file.name部分
	//删除按钮部分
</div>

还是不行

3、结论:是为空时出现的,空文件名、有删除按钮

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 `el-tooltip` 组件来实现悬浮展示,具体实现方法如下: 1. 在 `el-upload` 组件中添加 `list-type="picture-card"` 属性,让上传的文件以图片卡片的形式展示。 2. 使用 `slot-scope` 属性来自定义上传列表中每个文件的内容,并在需要展示文件名的元素上添加 `el-tooltip` 组件。 3. 在 `el-tooltip` 组件中设置 `content` 属性为文件名,并设置 `placement` 属性为 `top-start` 或 `top-end`,让提示框在元素上方悬浮展示。 示例代码如下: ```html <el-upload class="upload-demo" action="/upload" list-type="picture-card" > <template slot-scope="{ file }"> <div class="file"> <img src="file.url" alt="" class="file-img"> <el-tooltip class="item" effect="dark" :content="file.name" placement="top-start"> <div class="file-name">{{ file.name }}</div> </el-tooltip> </div> </template> </el-upload> ``` 需要注意的是,由于 `el-upload` 组件的上传列表是异步渲染的,所以如果需要在组件加载时就对上传列表中的元素进行操作,可以使用 `ref` 属性来获取上传列表组件,然后在 `mounted` 钩子函数中监听 `change` 事件,等待上传列表渲染完成后再进行操作。示例代码如下: ```html <el-upload class="upload-demo" action="/upload" list-type="picture-card" ref="upload" > <template slot-scope="{ file }"> <div class="file"> <img src="file.url" alt="" class="file-img"> <el-tooltip class="item" effect="dark" :content="file.name" placement="top-start"> <div class="file-name">{{ file.name }}</div> </el-tooltip> </div> </template> </el-upload> ``` ```javascript mounted() { this.$nextTick(() => { this.$refs.upload.$el.addEventListener('change', () => { // 在上传列表渲染完成后进行操作 // ... }) }) } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值