Java的新项目学成在线笔记-day8(三)
1.1.3.1 需求
上传图片界面如下图:
点击“加号”上传图片,图片上传成功自动显示;点击“删除”将删除图片。 1.1.3.2 页面
使用Element-UI的Upload上传组件实现上边的效果。
1) template
[mw_shl_code=applescript,true]<el‐upload
action="/filesystem/upload"
list‐type="picture‐card"
:before‐upload="setbusinesskey"
:on‐success="handleSuccess"
:file‐list="fileList"
:limit="picmax"
:on‐exceed="rejectupload"
:data="uploadval">
<i class="el‐icon‐plus"></i> </el‐upload>[/mw_shl_code]
el-upload参数说明:
action:必选参数,上传的地址 list-type:文件列表的类型(text/picture/picture-card) before-upload:上传前执行钩子方法 ,function(file)
on-success:上传成功 执行的钩子方法 ,function(response, file, fileList) on-error:上传失败的钩子方法,function(err, file, fileList)
on-remove:文件删除的钩子方法,function(file, fileList) file-list:文件列表,此列表为上传成功 的文件 limit:最大允许上传个数
on-exceed:文件超出个数限制时的钩子,方法为:function(files, fileList) data:提交上传的额外参数,需要封装为json对象,最终提交给服务端为key/value串
2)数据模型
[mw_shl_code=applescript,true]
<el‐upload action="/filesystem/upload"
list‐type="picture‐card"
:before‐upload="setbusinesskey"
:on‐success="handleSuccess"
:file‐list="fileList" :limit="picmax"
:on‐exceed="rejectupload"
:data="uploadval">
<i class="el‐icon‐plus"></i> </el‐upload>
<script> import as sysConfig from '@/../config/sysConfig';
import as courseApi from '../../api/course';
import utilApi from '../../../../common/utils';
import * as systemApi from '../../../../base/api/system';
export default {
data() {
return {
picmax:1,
courseid:'',
dialogImageUrl: '',
dialogVisible: false,
fileList:[],
uploadval:{filetag:"course"},
imgUrl:sysConfig.imgUrl
}
},
methods: {
//超出文件上传个数提示信息
rejectupload(){
this.$message.error("最多上传"+this.picmax+"个图片");
},
//在上传前设置上传请求的数据
setuploaddata(){
},
//删除图片
handleRemove(file, fileList) {
console.log(file)
alert('删除')
},
//上传成功的钩子方法
handleSuccess(response, file, fileList){
console.log(response)
alert('上传成功')
},
//上传失败执行的钩子方法
handleError(err, file, fileList){
this.$message.error('上传失败');
//清空文件队列
this.fileList = []
}
},
mounted(){
//课程id
this.courseid = this.$route.params.courseid;
} } </script>[/mw_shl_code]
1.1.3.3 测试
1、点击“加号”测试上传图片。
转载于:https://blog.51cto.com/13517854/2375338
Java的新项目学成在线笔记-day8(三)相关推荐
- Java的新项目学成在线笔记-day10(三)
1.4 测试CMS一键发布接口 1.4.1 配置虚拟主机 在nginx配置课程详情页面的虚拟主机,实现访问:www.xuecheng.com/course/detail/.....html. #静态资 ...
- Java的新项目学成在线笔记-day13(九)
6.2.2 创建媒资服务工程 媒资管理的相关功能单独在媒资服务中开发,下边创建媒资服务工程(xc-service-manage-media). 媒资服务的配置与cms类似,导入 "资料&qu ...
- Java的新项目学成在线笔记-day12(九)
3.1.4 搜索页面 创建搜索页面如下: 页面文件参考:"资料"-->"search"-->index_1.vue,重要代码如下: nuxt.js支 ...
- Java的新项目学成在线笔记-day14(四)
1.2.3.5 视频处理生成m3u8 下边是完整的视频处理任务类代码,包括了生成m3u8及生成mp4的代码. [mw_shl_code=applescript,true]@Component publ ...
- Java的新项目学成在线笔记-day7(一)
1.1需求分析 课程添加完成后可通过我的课程进入课程修改页面,此页面显示我的课程列表,如下图所示,可分页查询. 注意:由于课程图片服务器没有搭建,这里在测试时图片暂时无法显示. 上边的查询要实现分页. ...
- Java的新项目学成在线笔记-day13(八)
6 媒资管理 前边章节完成在线视频播放,如何实现点击课程计划播放视频呢,课程视频如何管理呢? 本节开始将对课程视频进行管理. 6.1需求分析 媒资管理系统是每个在线教育平台所必须具备的,百度百科对它的 ...
- Java的新项目学成在线笔记-day10(二)
1.3 课程发布接口 1.3.1 Api接口 此Api接口由课程管理提供,由课程管理前端调用此Api接口,实现课程发布. 在api工程下课程管理包下定义接口: [mw_shl_code=applesc ...
- Java的新项目学成在线笔记-day7(二)
1.3 前端页面说明 我的课程列表使用element 的card组件,如下: 页面布局代码如下: <template> <section> <el‐row >< ...
- Java的新项目学成在线笔记-day12(六)
3.6 获取数据 3.6.1 asyncData 方法 Nuxt.js 扩展了 Vue.js,增加了一个叫 asyncData 的方法, asyncData 方法会在组件(限于页面组件)每次加载 之前 ...
最新文章
- java arcengine_在Java程序中调用ArcEngine
- R语言-安装使用指南
- 互联网协议 — ICMP 互联网控制消息协议
- docker commit 命令
- angularjs与PHP,我应该混合AngularJS与PHP框架吗?
- C---编写程序:实现一个随堂测试,能进行加减乘除运算。要求如下:(1)随机产生两个1~10的正整数,在屏幕上输出题目,如:5+3=?(2)学生输入答案,程序检查学生输入答案是否正确,若正确,
- 特设三场!!快来看看 NVIDIA DLI 深度学习入门课程有没来到你的城市~
- CNN转换为SNN的算法
- 微信服务号如何绑定腾讯云服务器
- 怎样才能让自己的QQ号永远不会被盗?
- CSS(层叠样式表cascading style sheet)
- JDK1.8中英文官方文档
- 一个可以编辑sqlite数据库的 数据库编辑小工具 sqlite数据库 替换字段,sql替换数据库中某个字段的所有值
- LearnOpenGL学习笔记—PBR:IBL
- 【Mac】搜狗输入法干扰声音输出
- mysql sql 备份表_SQL语句之备份表
- 【MM小贴士】关于MR21修改物料价格与账期的关系
- 企业要在云优先的趋势下,制定符合业务发展的云计算解决方案
- 如何免费使用cdn资源[棋牌游戏服务器配置]
- 【全局地图mapping】三维全局地图的开源方案及对比--NDT、LOAM、LIO-SAM、ALOAM、FLOAM、Lego_loam、SC-Lego-LOAM.....
热门文章
- python验证中心极限定理_我竟然混进了Python高级圈子!
- 学python对学c++有帮助吗_2020,你该学习Python还是C++
- java返回json ajax_Spring MVC 中 AJAX请求并返回JSON的示例
- 鸿蒙系统低端机推行,华为正在考虑少量推行搭载鸿蒙系统的中低端手机,有望年底推出!...
- java练习:打印 数字1、2、3、4的组合,不能以4开头,1和3不能相邻,且数字不能重复
- 石墨计算机,高性能计算机助力石墨烯生产工艺的优化
- 利用STM32F405RG制作pyBoard实验板
- 光电信标灯发光盘的特性电流测试
- 2020秋季学期教学委员会第一次全体会议
- 对于第十五届智能车竞赛由于受到疫情影响对于确定国赛中可能存在瑕疵的地方