黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day8(三) [打印本页]

作者: 谷粒姐姐    时间: 2019-4-8 10:14
标题: 【郑州校区】Java的新项目学成在线笔记-day8(三)
1.1.3.1 需求
上传图片界面如下图:

点击“加号”上传图片,图片上传成功自动显示;点击“删除”将删除图片。   1.1.3.2 页面
使用Element-UI的Upload上传组件实现上边的效果。
1) template

[AppleScript] 纯文本查看 复制代码
<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] 纯文本查看 复制代码
 
<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、点击“加号”测试上传图片。








欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2