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 相关文章推荐
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
js html实现计算器功能
Nov 13 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 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
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
javascript回到顶部特效
2016/07/30 Javascript
jquery实现拖动效果
2016/08/10 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python正则表达式教程之一:基础篇
2017/03/02 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
django 控制页面跳转的例子
2019/08/06 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Python pip配置国内源的方法
2020/02/14 Python
Python如何实现的二分查找算法
2020/05/27 Python
法国房车租赁网站:Yescapa
2019/08/26 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
普天C++笔试题
2016/03/20 面试题
八年级数学教学反思
2014/01/31 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
乐山大佛导游词
2015/02/02 职场文书
客户答谢会致辞
2015/07/30 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
MySQL RC事务隔离的实现
2022/03/31 MySQL