iview实现图片上传功能


Posted in Javascript onJune 29, 2020

本文实例为大家分享了iview实现图片上传的具体代码,供大家参考,具体内容如下

如下图片:这里结合iview里面表单验证做的

iview实现图片上传功能

完整代码如何 

<template>
 <div>
  <div class="navigation">
   <p>
   <span>管理首页 > 应用 > 抢单侠> 信贷管理> {{title}}</span>
   </p>
  </div>
  <div class="clearfix contentcss sales-statis">
   <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <FormItem label="模板名称:" prop="templatename">
     <Input v-model="formValidate.templatename" placeholder="请输入模板名称" style="width:240px"></Input>
    </FormItem>
    <FormItem label="模板类别:" prop="templatetype">
     <Select v-model="formValidate.templatetype" placeholder="请选择模板类别" style='width:240px;'>
      <Option v-for="item in templateList" :value="item.templateCode" :key="item.templateCode">{{ item.templateName }}</Option>
     </Select>
    </FormItem>
    
    <FormItem label="开放范围:" prop="openrange">
     <Select v-model="formValidate.openrange" placeholder="请选择开放范围" style='width:240px;'>
      <Option v-for="item in openrangeList" :value="item.openrangeCode" :key="item.openrangeCode">{{ item.openrangeName }}</Option>
     </Select>
    </FormItem>
    <FormItem label="上传图片:" prop="productlogo">
     <Upload
     action=""
     :before-upload="handleUploadicon"
     :show-upload-list="false"
     :format="['jpg','jpeg','png', 'gif']"
     :on-format-error="handleFormatError1">
     <img class="iconlabelUrl" :src="formValidate.labelUrl" alt="">
     <Input v-model="formValidate.productlogo" disabled style="width: 120px;margin-top:24px" class="left ml5 hidden"></Input>
     <!-- <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button> -->
     </Upload>
    </FormItem>
    <FormItem>
     <Button type="primary" @click="handleSubmit('formValidate')" style='width:100px'>保存</Button>
     <Button @click="handleReset('formValidate')" style="margin-left: 8px;width:100px">返回</Button>
    </FormItem>
   </Form>
  </div>
 </div>
</template>
<script>
 export default{
  data(){
   return{
    title:'',
    openrangeList:[
     {openrangeCode:'1',openrangeName:'全部用户'},
     {openrangeCode:'2',openrangeName:'会员用户'},
    ],
    templateList:[
     {templateCode:'1',templateName:'海报'},
     {templateCode:'2',templateName:'名片'}
    ],
    formValidate: {
     productlogo:'',
     templatename:'',
     templatetype:'1',
     openrange:'1',
     labelUrl: require("../../image/moren.png")
 
    },
    ruleValidate:{
      templatename:[
      {required: true, message: '请输入模板名称', trigger: 'change'},
     ],
     productlogo:[
      { required: true, message: "请上传图片", trigger: "blur" }
     ]
    }
   }
  },
  methods:{
   handleUploadicon(file) {
    let splic = file.name.split(".");
    if (
     splic[splic.length - 1] == "png" ||
     splic[splic.length - 1] == "jpg" ||
     splic[splic.length - 1] == "gif" ||
     splic[splic.length - 1] == "jpeg"
    ) {
     let formData = new FormData();
     formData.append("file", file);
     let config = {
     headers: {
      "Content-Type": "multipart/form-data"
     }
     };
     this.http
     .post(BASE_URL + "/fileUpload", formData, config)
     .then(resp => {
      if (resp.code == "success") {
      this.formValidate.labelUrl = resp.data;
      this.formValidate.productlogo = resp.data;
      } else {
      }
     })
     .catch(() => {});
     return false;
    }
   },
   handleFormatError1(file) {
   this.$Message.info("图片格式不正确,请上传正确的图片格式");
   },
   handleSubmit (name) {
    this.$refs[name].validate((valid) => {
     if (valid) {
      if(this.title = '添加模板'){
       this.$Modal.confirm({
        title: "温馨提示",
        content: "<p>确认添加该模板?</p>",
        onOk: () => {
         let data = {
          exhibitionName : this.formValidate.templatename,
          exhibitionType : this.formValidate.templatetype,
          openType : this.formValidate.openrange,
          exhibitionPath : this.formValidate.productlogo
         }
         this.http.post(BASE_URL+'后台保存接口',data)
         .then(data=>{
          if(data.code=='success'){
           this.$Message.success('添加成功');
           this.$router.push('/exhibition')
          }else{
           this.$Message.error('添加失败')
          }
         }).catch(err=>{
          console.log(err)
         })
        },
        onCancel: () => {}
       });
      }else{
       this.$Modal.confirm({
        title: "温馨提示",
        content: "<p>确认修改该模板?</p>",
        onOk: () => {
         let data = {
          exhibitionName : this.formValidate.templatename,
          exhibitionType : this.formValidate.templatetype,
          openType : this.formValidate.openrange,
          exhibitionPath : this.formValidate.productlogo
         }
         this.http.posst(BASE_URL+'后台修改接口',data)
         .then(data=>{
          if(data.data=='success'){
           this.$Message.success('修改成功');
           this.$router.push('/exhibition')
          }else{
           this.$Message.error('修改失败')
          }
         }).catch(err=>{
          console.log(err)
         })
        },
        onCancel: () => {}
       });
      }
     } 
    })
   },
   handleReset(name){
    this.$refs[name].resetFields()
    this.$router.push('/exhibition')
   }
  },
  mounted(){
   if(this.$route.query.id){
    this.title = '添加模板'
   }else{
    this.title = '编辑模板'
    let data = {
     exhibitionCode:this.$route.query.exhibitionCode
    }
    this.http.post(BASE_URL+'/loan/exhibition/getByCode',data)
    .then(data=>{
     if(data.code=='success'){
      this.formValidate.templatename=data.data.exhibitionName,
      this.formValidate.templatetype=data.data.exhibitionType,
      this.formValidate.openrange=data.data.openType,
      this.formValidate.labelUrl= data.data.exhibitionPath,
      this.formValidate.productlogo=data.data.exhibitionPath
     }
    })
   }
  }
 }
</script>
<style lang="less" scoped>
 .title{
  height:60px;line-height:60px;background:#fff;
  font-size: 20px;text-indent: 20px;
 }
 .ivu-form .ivu-form-item-label{
  text-align: justify !important
 }
 .iconlabelUrl {
  width: 240px;
  height: 120px;
 }
</style>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
vue+animation实现翻页动画
Jun 29 #Javascript
vue+element实现图片上传及裁剪功能
Jun 29 #Javascript
vue实现匀速轮播效果
Jun 29 #Javascript
vant实现购物车功能
Jun 29 #Javascript
js实现随机点名器精简版
Jun 29 #Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 #Javascript
在Vue中使用antv的示例代码
Jun 29 #Javascript
You might like
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
Python FTP操作类代码分享
2014/05/13 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python实现ATM系统
2020/02/17 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
银行实习推荐信
2015/03/27 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL