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 相关文章推荐
js获取当前路径的简单示例代码
Jan 08 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP数据流应用的一个简单实例
2012/09/14 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
jquery异步请求实例代码
2011/06/21 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
Python转码问题的解决方法
2008/10/07 Python
python计算时间差的方法
2015/05/20 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python实现微信自动回复机器人功能
2019/07/11 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
25岁生日感言
2014/01/13 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
学籍证明模板
2014/11/21 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python