关于非图像的显示？

来源：8-2 讲师头像的保存与显示

慕神4535282

2021-03-11

老师，下午好！
请教一个问题，本节中，对于头像这种图片文件，在 teacher.vue中，上传头像图片成功后，代码是这样实现显示的。

<div v-show="teacher.image" class="row">
  <div class="col-md-4">
    <img v-bind:src="teacher.image" class="img-responsive">
  </div>
</div>

请问老师，如果上传的是像 .bin 这种不能够显示的文件，上述的代码要怎么写才可以实现通知用户上传成功呢？（我google过了，真的找不到相关的资料，像，等多媒体标签都不合适）麻烦老师贴一下代码，谢谢！

写回答

3回答

甲蛙

2021-03-12

已采纳

应该在图片上传的时候，校验只允许上传指定后缀的文件。课程有介绍的，你可能还没看到
//img1.sycdn.imooc.com/szimg/604b53440971b63114600642.jpg

慕神4535282

可以了，非常感谢！

2021-03-16

共2条回复

慕神4535282

提问者

2021-03-15

截图：

//img1.sycdn.imooc.com/szimg/604ed2d909a12a3f07370401.jpg

上图中，把 v-show 换成 v-if 也一样不行。

//img.mukewang.com/szimg/604ed2d909fb2f6f13720391.jpg

//img.mukewang.com/szimg/604ed2d90909140106540277.jpg

谢谢老师解答！！！

甲蛙

因为mobile是你在js里创建的，初始是没有的，vue不会监听mobile的formData的变化，所以v-show没起作用。你可以在data先声明一下，加个mobile:{formData:{}} 试试。上传之前不是可以拿到文件信息吗？你在data里再增加个文件名的响应式变量，比如fileName，上传时拿到file信息，就给fileName赋值。如果还要后缀名的判断，同样的也加个后缀名响应式变量。显示的地方就用：{{fileName}}上传成功

2021-03-16

共1条回复

慕神4535282

提问者

2021-03-13

老师，这是问题的截图，这样应该很直观了吧，谢谢老师的再次解答！！！

//img1.sycdn.imooc.com/szimg/604c23bb09c44b6f09280553.jpg

慕神4535282

甲蛙

老师，我就是不懂得你所说的最后一句怎么实现才提问的，我的问题就是怎么把文件名 + 上传成功显示出来，你回复的这段话你不说我也清楚，我的问题是怎么实现？就相当于你以往的风格那样，讲解到某个知识点的时候，你一般也会提到相关联的知识点，这就相当于当你讲解到上传图片是这样的代码来实现时，也顺带讲解一下非图片的代码要怎么实现，对于上传 xxx.bin 的文件时，要怎么实现上传成功后的文件名+已上传成功这段提示文字呢？请看上面的回复的3个截图。

2021-03-15

共2条回复

Spring Cloud+ Vue前后端分离开发企业级在线视频系统

全网稀缺课程市场热门项目+主流框架一课掌握前后端技术

1743 学习 · 1697 问题

查看课程

相似问题

关于course_content_file表的创建的追问

回答 1

课程图片不显示

回答 1

讲师头像图片不显示

回答 1

关于section表的问题2

回答 1

图片已保存本地却不能显示在页面

回答 2

打开慕课网App查看更多内容