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 相关文章推荐
javascript dom 基本操作小结
Apr 11 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
Boostrap入门准备之border box
May 09 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
从理论角度讨论JavaScript闭包
Apr 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的5个入手程序
2006/11/23 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
PHP 类与构造函数解析
2017/02/06 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
jquery ui对话框实例代码
2013/05/10 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python实现批量改文件名称的方法
2015/05/25 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
文明工地标语
2014/06/16 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技