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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
js中数组的常用方法小结
Dec 30 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
vue地区选择组件教程详解
May 04 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
详解element-ui日期时间选择器的日期格式化问题
Apr 08 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 常用的header头部定义汇总
2015/06/19 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
Python3+Appium安装使用教程
2019/07/05 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Django 解决由save方法引发的错误
2020/05/21 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
库房保管员岗位职责
2014/04/07 职场文书
反腐倡廉观后感
2015/06/08 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL