实现element ui上传一张图片

这篇具有很好参考价值的文章主要介绍了实现element ui上传一张图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.1 功能描述

之前项目需求会使用element ui组件中的el-upload上传一张图片。因为界面只能存在一张图片,所以上传一张图片成功之后,需要隐藏上传按钮。

2.1 主要考点

2.1.1 运用组件

elment-ui组件的el-upload上传

2.2.1 基本思路

先具体叙述一下上传流程:
①上传前,先书写好上传接口地址进action,需要请求头认证的话,使用headers。
②上传时,limit会限制每次上传的最大文件数,on-success来捕获上传接口地址返回的图片url地址,前端进行保存。
③上传后,通过动态类样式,隐藏上传按钮
④删除,on-remove用来把之前保存进前端的图片url清空,同时通过动态类样式,把上传按钮显示回来。可以再进行第①步的操作。

接着我们查看一下el-upload上传图片,就需要了解一下该组件下的具体属性(elment-ui的upload组件说明),本次上传会使用到的参数如下:

  • :limit :允许上传的最大文件数(限制每次上传只能选择1张图片)。
  • :on-exceed :当文件上传超出数量时,执行的钩子函数(当多次操作上传1张图片,会执行的函数)
  • :class :动态类样式(用来控制上传一张图片成功之后,隐藏上传按钮)
  • :action :用来存放后端提供的上传图片的接口(一般来说,后端会提供一个上传图片接口,当图片数据传给后端,后端会给前端该图片的云存储地址)
  • :file-list :上传的文件列表,数组形式(当上传图片时,会把图片存放在该属性所定义的列表之下)
  • :headers :设置上传时的请求头,对象形式(当上传接口,需要放入token授权信息进请求头,在这边写入请求头)
  • list-type :文件列表的类型
  • :on-success :当图片上传成功时所执行的函数(用来捕获后端返回的图片云存储地址,以便之后提交表单时,可以把此url地址上传给后端)
  • :on-remove :文件列表移除文件时的钩子(当进行删除已上传的图片事件,清空之前所捕获url图片地址)

3.1 踩到的坑

  • 问题1:怎么使用动态类样式,把上传按钮,显示与隐藏呢?
  • 回答1:使用的是noneBtnDealImg变量来进行判断
:class="noneBtnDealImg ? 'disUoloadSty':''"

在data中书写一个变量,noneBtnDealImg的真假来控制el-upload是否存在disUoloadSty类名

在css中书写深度选择器,当存在类名disUoloadSty,把上传按钮隐藏。

/deep/ .disUoloadSty .el-upload--picture-card{
  display:none;   /* 上传按钮隐藏 */
}

切入点在于,上传成功时隐藏,删除时显示。那么就:
①在on-success中,书写判断file-list文件列表长度是否为一。
为1时,noneBtnDealImg就置真,此时,el-upload存在disUoloadSty类名,执行csss中的隐藏按钮样式。

②在on-remove中,书写判断file-list文件列表长度是否为一。
不为1时,noneBtnDealImg就置假,此时,el-upload不存在disUoloadSty类名,不会执行csss中的隐藏按钮样式。

  • 问题2:el-upload中的:headr怎么放入请求头对象?
  • 回答2::header中可以定义一个变量,此变量可以在data中,在data中进行请求头的对象设置。

4.1 相应框架或语言

语言:html,js,css
框架:elemnet-ui,vue 2.0

5.1 相关代码

<template>
  <div class="stylebg">
    <h3>背景宣传图</h3>
    <el-upload
      :limit="1"
      :on-exceed="(files, fileList)=>handleExceed(files, fileList, 1)"
      class="avatar-uploader"
      :class="noneBtnDealImg ? 'disUoloadSty':''"
      :action="uploadfileurl"
      :file-list="fileList"
      :headers="headerObj"
      style="padding:30px 0 ;"
      list-type="picture-card"
      :on-success="(res, file, fileList)=>handleAvatarSuccess(res, file, fileList,'img')"
      name="image"
      :on-remove="(file,fileList)=>handleRemove(file,fileList,'img')">
      <i class="el-icon-plus" ></i>
    </el-upload>
    <el-button @click="toUpDate" type="primary">提 交</el-button>
  </div>
</template>

<script>
import {getBGAPI,setBGAPI} from "@/api/homePageManage.js"
export default {
  data(){
    return{
      fileList:[],
      headerObj: {
        authorization: localStorage.getItem('token')
      },
      img:'',
      noneBtnDealImg:false,
      uploadfileurl:this.uploadFileURL,
    }
  },
  created(){
    this.getBG()
  },
  methods:{

    handleExceed(files, fileList, num) {
      this.$message.warning(`当前限制选择 ${num} 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
    },

    // 图片上传
    handleAvatarSuccess(res,file,fileList,name) {
      this.img = res.data.path2[0]
      this.noneBtnDealImg = fileList.length >= 1
    },

    //图片删除
    handleRemove(file,fileList,name) {
      this.img = ''
      this.noneBtnDealImg = fileList.length >= 1
    },

    //获取背景宣传图
    getBG(){
      this.fileList = []
      getBGAPI().then(res => {
        console.log(res.img)
        this.fileList.push({'url':res.img})
        this.noneBtnDealImg = this.fileList.length >= 1
        this.img = res.img
      })
    },

    //提交背景宣传图
    toUpDate(){
      setBGAPI({
        img: this.img
      }).then(res => {
        this.$message.success('设置成功')
        this.getBG()
      })
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .crsBanner {
    .el-form-item__label::after {
      content: '(最多1张)';
      display: block;
      font-size: 12px;
      color: #999;
      line-height: 12px;
    }
  }

/deep/ .allUpload {
    .el-form-item__content{
      // flex: none !important;
      display: flex;
    }
  }

/deep/ .el-upload-list__item{
  transition: none !important
}

/deep/ .disUoloadSty .el-upload--picture-card{
  display:none;   /* 上传按钮隐藏 */
}

/deep/ .el-upload-list__item{
  width:300px;
  height:300px;
}

</style>

6.1 运行截图

elementui上传图片到数据库,个人练习,前端,javascript,elementui文章来源地址https://www.toymoban.com/news/detail-609151.html

到了这里,关于实现element ui上传一张图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 扩展element-ui el-upload组件,实现复制粘贴上传图片文件,带图片预览功能

    控件改造 在窗口的 el-form 控件参数中添加 @paste.native 事件,事件绑定方法名 handlePaste 也可以在其他控件中添加事件监听,看个人需求。 注意: 监听粘贴事件时,需要当前页面先获取焦点,否则无法正常监听, 可以在页面加载后调用 focus() 获取焦点 粘贴功能Js部分参考资料

    2023年04月08日
    浏览(91)
  • Element-ui 上传图片前压缩图片

    上传前把图片大小进行一个压缩在进行上传。 文章目录 需求:项目当中上传图片的需求点肯定有很多,再上传之后,如果图片很大的话,在加载的时候就会很慢。最近发现系统首次加载越来越慢,就开始思考怎么能降低这个加载时间,由于首页图片很多,所以图片的大小就

    2024年02月06日
    浏览(55)
  • Element UI upload 图片上传功能

    在config/SecurityConfig配置 \\\"/xxx/**\\\"让xxx路径下的全部文件访问不需要token 在config/ResourcesConfig中增加 在data()里面加入header属性设置子属性Authorization 在el-upload里设置 在提交时 在提交时新增clear()方法调用子组件里clear方法 加入@clearImageUrl绑定方法 clearImageUrl(1) 括号内可以直接携带参

    2024年02月14日
    浏览(36)
  • element ui 多张图片上传、回显、删除

    前端文件上传 1、展示部分 2、方法部分 3.函数部分 表单提交时的操作 这个写的有点长,大家挑选自己用的到的部分复制修改一下就行 后端文件上传 1.controoler部分

    2024年02月09日
    浏览(39)
  • Vue上传图片功能【element ui】

    路径那里是axios请求根路径和接口文档里面后端给的路径拼接的 只要看到这个就证明这张图片并没有上传成功 我已经通过axios的request拦截器为每一个请求都挂载了一个Authorization也就是token,挂载了这个也就说明每一个axios请求都会追加一个token 但是为什么配置了token还是显示

    2024年02月12日
    浏览(53)
  • 用element-ui中的up-load组件实现简单的图片上传到本地然后回显(从前端到后端)

    一:前端样式以及效果:  前端样式代码如下: 二:后端Controller层  这里的处理逻辑是将前端传递进来的图片交给FileUtil处理,接下来看FileUtil的代码: 首先获取传递进来图片的文件名后缀 然后用UUID将其拼接得到一个新的名字 将图片存入到本地的文件夹下面 接下来返回路

    2024年02月03日
    浏览(47)
  • element ui 上传图片以及pdf组件

    FileUpload.vue template   div     el-upload       :action=\\\"action\\\"       :file-list=\\\"fileList\\\"       list-type=\\\"picture-card\\\"       :limit=\\\"limit\\\"       :accept=\\\"accept\\\"       :class=\\\"hideUpload || uploading ? \\\'hideUpload\\\' : \\\'\\\'\\\"       :on-error=\\\"handleError\\\"       :before-upload=\\\"beforeUpload\\\"       :on-success=\\\"handleImageSucce

    2024年02月16日
    浏览(44)
  • Element-ui配合vue上传图片

    这里为大家介绍饿了吗ui配合vue封装一个图片上传的组件  首先大家先看一个饿了吗ui文档的各个钩子函数的介绍! on-preview这个属性我们一般用来预览图片时使用 on-remove这个属性时文件被删除时执行 一般我们在这里面进行数组的筛选 让它保证为最新数组 on-change当文件被选择

    2024年02月09日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包