elementui上传图片(代码片段)

关键词：

element ui图片上传

• • 1.template 部分
  • 2. script 部分
  • 3. scss 部分

• 这玩意很简单，记录一下吧，给入门的小白用下

1.template 部分

<template>
  <div class="editPage__img">
    <div class="title">图片设置</div>
    <div class="img__con">
      <el-upload
        class="avatar-uploader"
        :action="uploadImgUrl"
        :data="uploadImgData"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <p><span>(点击图片即可替换其它图片)</span><br>说明：图片宽度为750PX，格式为JPG或者PNG，每张图片大小不超过3M</p>
    </div>
  </div>
</template>

2. script 部分

data() 
    return 
      imageUrl: this.rightData.imageUrl,
      // 图片上传
      uploadImgUrl: `$process.env.VUE_APP_BASE_API/common-server/aliFile/upLoadFileNoSecret`,
      uploadImgData:  busiName: 32 ,
      // 应付多个组件的情况 记录当前组件的key值
      componentKey: null,
    ;
  ,
  methods: 
    uploadImg() ,
    handleAvatarSuccess(res, file) 
      // console.log(res)
      this.imageUrl = res.data.url;
       this.$emit("childRightFn", 
        ...this.rightData,
        ... imageUrl: this.imageUrl, 
        ...props: src: this.imageUrl 
      );
    ,
    beforeAvatarUpload(file) 
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
        // 限制只能3M以内的图片
      const isLt2M = file.size / 1024 / 1024 < 3;

      if (!isJPG) 
        this.$message.error("图片只能是 JPG 或者 PNG 格式!");
      
      if (!isLt2M) 
        this.$message.error("上传头像图片大小不能超过 3MB!");
      
      return isJPG && isLt2M;
    ,
  ,

3. scss 部分

• 请大家按需取用，不需要删掉就是，不要原封不动的搬

<style lang="scss" scoped>
.editPage__img 
  .avatar-uploader .el-upload 
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  
  .avatar-uploader .el-upload:hover 
    border-color: #409eff;
  
  .avatar-uploader-icon 
    font-size: 16px;
    color: #8c939d;
    width: 350px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  
  .avatar 
    width: 350px;
    height: auto;
    display: block;
  
  .title 
    font-size: 18px;
    margin-bottom: 20px;
  
  .img__con 
    p 
      margin-top: 10px;
      text-align: center;
      span
        color: #409eff;
      
    
    .el-button 
      width: 100%;
      margin: 10px 0 20px 0;
    
  

</style>

• 加了很多注释，相信大家问题不大了，有问题可以加主页的群直接问我就成

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我(主页有Q)

elementui上传图片前判断图片的尺寸大小(代码片段)

　　在上传图片前判断尺寸的大小，遇到了好多的坑。1.没有注意到onload是异步加载，所以一定要在onload后在执行判断图片尺寸2.upload内部需要一个promise,简单的return出false并没有什么用3.完整代码：beforeAvatarUpload(file)constisSize=newPr... 查看详情

elementui上传文件图片大小加了限制后仍然上传了(代码片段)

https://blog.csdn.net/chanlingmai5374/article/details/80558444 看了这位老哥的说法在看看文档才发现自己没认真看文档<el-upload:beforeUpload="beforeAvatarUploadPdf"</el-upload>　　beforeAvatarUploadPdf(file)vartestms 查看详情

vue实现前端裁剪（elementui上传+vuecropper实现）(代码片段)

data中需要定义的变量logoUrl:\'\',//裁剪后的图片//裁剪组件是否展示dialogVisible:false,//裁剪组件的基础配置optionoption:img:\'\',//裁剪图片的地址info:true,//裁剪框的大小信息outputSize:0.8,//裁剪生成图片的质量outputType:\'png\',//裁剪生成图片... 查看详情

elementui上传图片(代码片段)

elementui图片上传1.template部分2.script部分3.scss部分这玩意很简单，记录一下吧，给入门的小白用下1.template部分<template><divclass="editPage__img"><divclass="title">图片设置</div><divclass="img__c... 查看详情

vue结合elementui实现图片上传可预览，可删除,以base64字符串上传到服务器(代码片段)

图片实现base64上传实现背景实现方式实现代码实现背景图片上传一般都是通过调用文件上传接口,返回图片地址,我们用拿到的图片地址进行相应操作,如表单提交等;但是最近有一个朋友遇到了一个问题,他们没有做图片管理,所以需... 查看详情

vuequilleditor自定义图片/视频上传（elementui+oss）字体字体大小段落等(代码片段)

  近期项目中需要使用富文本编辑器，开始想到的富文本编辑器是百度的UEditor，UEditor功能齐全、插件多，但是图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，而且是PHP、JSP、ASP、.Ne... 查看详情

前端使用elementui框架，后端使用thinkjs，上传图片至ali-oss系统(代码片段)

...#xff0c;一路遇到不少坑，在此做一下记录总结。首先是elementUI前端部分上传至后台，需要将flie文件，转为FormData对象后传至后台 查看详情

springboot+vue+elementui实现表单上传图片同时数据库存储url(代码片段)

后端（springBoot）思路：1、实现图片上传接口，利用图片工具类将图片上传至服务器或者本地2、实现图片删除接口，利用图片工具类对已上传至服务器或者本地的图片删除3、实现数据库修改接口，修改数... 查看详情

饿了么elementui之upload组件图片上传原创(代码片段)

图片文件换汤不换药，只要注意前端的写法即可1.饿了么组件可以利用http-request的属性对上传进行自定义:http-request="uploadFile"2.设置文件FormData对象传入请求constformdata=newFormData();constfile=params.file;formdata.append("file",file);3.全部代码<... 查看详情

elementui上传组件改造--扫码上传(代码片段)

...这个功能需要对原有上传组件的二次封装，我们使用的是elementUI，采用的是上传组件，一如我上一篇文章所说，需要进行二次封装，由于是组件，在组件上，还能进行各种自定义的封装，例如动态加一个class，例如，添加一个原... 查看详情

vuequilleditor自定义图片/视频上传（elementui+oss）字体字体大小段落等(代码片段)

...-editor的肩膀上进行Quilleditor的自定义图片/视频上传（ElementUI+OSS）、字体、字体大小、标题、段落等封装。先看效果再来编码 查看详情

elementui上传文件upload限制上传文件格式(代码片段)

<el-uploadclass="upload-demo":limit="3":before-upload="beforeUpload":action="fileUpload":on-exceed="handleExceed":on-success="han 查看详情

elementui一次请求上传多个文件(代码片段)

elementui<el-uploadclass="upload-demo"ref="upload"action="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove":file-list="fileList":auto-upload="false"&g 查看详情

elementui+vue+django上传文件(代码片段)

...记录0.主要参考[1]Element文档：Upload上传[2]肖祥：ElementUI上传文件以及限制[3]Pytho 查看详情

elementui视频上传（已上线，拿去即用）(代码片段)

elementui视频上传+进度条实现（拿去即用）1.template部分2.script部分3.scss部分1.template部分<template><divclass="editPage__video"><divclass="title">视频设置</div>& 查看详情

elementui使用el-upload上传文件写法总结及避坑，上传图片/视频到本地/服务器以及回显+删除(代码片段)

ElementUpload上传ElementUpload官方文档：el-upload具体细节只看官方文档，本篇主要介绍避坑点和用法总结注意点以及坑本地上传想要回显图片视频，使用on-success是没办法再在上传后获取到本地文件路径后进行回显的，... 查看详情

vue----elementui实现上传excel(代码片段)

1、功能描述：vue项目使用el-upload实现上传Excel。2、功能效果：在el-upload基础上做了样式整改。 3、功能实现：//el-upload上传组件<template><div><el-uploadref="upload"class="upload-demo"actionaccept=".xlsx":limit=limit:auto-upl 查看详情

基于vue+elementui的文件上传（可拖拽上传）(代码片段)

(文章目录)实现效果一、先创建一个Dialog对话框进行存放<template><!--导入遮罩层--><el-dialog:title="$t(to_lead)":visible.sync="BatchAdd"custom-class="BatcchAdd"width="30%":bef 查看详情