Java的新项目学成在线笔记-day8（三）

1.1.3.1 需求 
上传图片界面如下图：
 
点击“加号”上传图片，图片上传成功自动显示；点击“删除”将删除图片。   1.1.3.2 页面 
使用Element-UI的Upload上传组件实现上边的效果。
1) template
 

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10

<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>

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)数据模型
 

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<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>

1.1.3.3 测试 
1、点击“加号”测试上传图片。