现在谈一下elelmentui中使用Upload 上传通过点击或者拖拽上传文件(图片)

<el-upload
  name="multfile"    //上传的文件字段名
  class="avatar-uploader"
  :action="updateUrl"   //必选参数,上传的地址,即接口地址
  :data="itemForm"   //上传时附带的额外参数
  :before-upload="beforeAvatarUpload"   //上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。
  :on-success="handleAvatarSuccess"   //文件上传成功时的钩子函数
  ref="newupload"
>
  <el-button
    slot="trigger"
    size="small"
    icon="el-icon-upload"
    style="margin-top: 20px;"
  >选择上传文件
  </el-button>
  <div slot="tip" class="el-upload__tip">
     只能上传jpg/png文件,且不超过500kb
   </div>
</el-upload>
 
<el-button type="primary" size="small" @click="submitBtn" style="width: 124px;"
>提 交</el-button>
 
 
script中:
  

data() {
  return {
    itemForm: {
    //编辑时数据
      token: sessionStorage.getItem('loginToken'),
      id: 0,
      user_name: '',
      user_nike_name: '',
      user_sex: 1, //默认 1男 0女
      user_phone: '',
      user_email: '',
      head_img: ''
    },
    fd: '', //向服务器进行传递的参数(带有图片formdata)
    updateUrl: this.serverUrl + '/userInfo/update'
  }
},
methods:{
  //成功时保存一下后台给你返回的图片,可以渲染到页面上

  handleAvatarSuccess(res, file) {
    this.itemForm.head_img = URL.createObjectURL(file.raw)
  },
  //上传时,判断文件的类型及大小是否符合规则
  beforeAvatarUpload(file) {
    const isJPG =file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/gif'
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isJPG) {
      this.$message.warning('上传头像图片只能是 JPG/PNG/GIF 格式!')
      return isJPG
    }
    if (!isLt2M) {
      this.$message.warning('上传头像图片大小不能超过 2MB!')
      return isLt2M
    }
    this.multfileImg = file
    return isJPG && isLt2M
   },
  //点击提交按钮,向服务器传递你要传递的参数,涉及到formData  
  submitBtn() {
    this.$refs.itemForm.validate(valid => {
      if (valid) {
        this.fd = new FormData()
        this.fd.append('token', sessionStorage.getItem('loginToken')) //传其他参数
        this.fd.append('id', this.itemForm.id)
        this.fd.append('user_name', this.itemForm.user_name)
        this.fd.append('user_nike_name', this.itemForm.user_nike_name)
        this.fd.append('user_sex', this.itemForm.user_sex)
        this.fd.append('user_phone', this.itemForm.user_phone)
        this.fd.append('user_email', this.itemForm.user_email)
        if (this.multfileImg != null) {
          this.fd.append('multfile', this.multfileImg)
        }
        api.updateUserInfo(this.fd).then(res => {
          if (res) {
            this.$message({ showClose: true, type: 'success', message: '设置成功' })
            this.initPage()
          }
        })
      } else {
          this.$message({
          showClose: true,
          type: 'error',
          message: '请检查表单信息的正确性'
          })
        return false
      }
    })
  
  }

elementUi--->实现上传图片效果(upload+formData)的更多相关文章

  1. vue ----element-ui 文件上传upload 组件 实现 及其后台

    1.前台 action 不用改 :https://jsonplaceholder.typicode.com/posts/ getFile: 获取文件 data(){ return { file: {} ...

  2. element-ui中上传文件upload

    <el-upload class="upload-demo" name="targetFile" ref="upload" :with ...

  3. vue+Element-ui实现分页效果

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui ...

  4. iOS开发 tableView点击下拉扩展 + 内嵌collectionView上传图片效果

    ---恢复内容开始--- //需要的效果 1.设置window的根视图控制器为一个UITableViewController #import "AppDelegate.h"#imp ...

  5. elementUi + express 上传图片

    // 前端代码 <el-upload drag action="http://localhost:4001/article/uploadCoverImage" multipl ...

  6. vue element-ui 组件上传图片 之后 对上传按钮 进行隐藏,删除之后重新显示

    注:如果在当前的 vue 文件里 写了 style 样式,得 去除 scoped [私有属性必须去除,不能保留](这个是重点,不去除不生效), template 部分 <el-upload    ...

  7. vue element-ui 组件上传图片 以及对 图片的 宽高 和 大小 格式等 做出限制

    vue  文件: 自行引用 elemen-ui    <el-upload                         action=" 让后端给你上传地址 "      ...

  8. 如何用elementui去实现图片上传和表单提交,用axios的post方法

    下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容 <!--这个组件主要用来研究upload这个elementui的上传插件组件--> & ...

  9. 改造vue-quill-editor: 结合element-ui上传图片到服务器

    前排提示:现在可以直接使用封装好的插件vue-quill-editor-upload 需求概述 vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时 ...

随机推荐

  1. [转载]Quartus ii 一些Warning/Eeror分析与解决

    我会在此基础上继续添加 原文地址:ii 一些Warning/Eeror分析与解决">Quartus ii 一些Warning/Eeror分析与解决作者:yanppf 注:http:// ...

  2. 四、续绑定SignaIR的用户管理-(添加好友和消息盒子)

    一.聊天消息表(普通消息,申请消息,群聊消息) CREATE TABLE MSG_INFO ( MSG_Id INT PRIMARY KEY AUTO_INCREMENT, -- 消息标识 MSG_T ...

  3. u-boot 用哪个lds链接脚本

    顶层Makefile文件中 : ifndef LDSCRIPT    #LDSCRIPT := $(srctree)/board/$(BOARDDIR)/u-boot.lds.debug    ifd ...

  4. 设计模式Design Pattern(3) -- 责任链模式

    什么是责任链模式? 责任链模式(Chain of Responsibility Pattern):请求知道公开接口,但不知道那个具体类处理,这些具体处理类对象连接成一条链.请求沿着这条链传递,直到有对 ...

  5. ES6 Module(模块)

    1.export命令 一个模块就是一个独立的文件. 该文件内部的所有变量,外部无法获取. 如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量. 下面是一个 JS 文件,里 ...

  6. npm cache clean --force

    当出现这个问题时npm ERR! Unexpected end of JSON input while parsing near '...,"dist":{"shasum ...

  7. int转字符串 stringstream

    1. 设定一个任意数字串,数出这个数中的偶数个数,奇数个数,及这个数中所包含的所有位数的总数,将答案按 “偶-奇-总” 的位序,排出得到新数.重复进行,最后会得到 123. #include<i ...

  8. 小程序swiper实现订单页面

    小程序swiper实现订单页面 myOrder.wxml <!--pages/myorder/myorder.wxml--> <view class="swiper-tab ...

  9. Jquery $().each()与$.each(data,function(i,obj))区别

    在遍历DOM时,通常用$(selector).each(function(index,element))函数: 在遍历数据时,通常用$.each(dataresource,function(index ...

  10. hashcode native

    hashcode Java中的hashCode方法就是根据一定的规则将与对象相关的信息(比如对象的存储地址,对象的字段等)映射成一个数值,这个数值称作为散列值. 在设计hashCode方法和equal ...