elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成

简介: elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成

序章

前几天公司给安排了一个上传组件的任务,但是给用户的上传图片的那个样式,elementui却没有,这时我只能自定义样式了。

遇到了同等bug

       直接看解决标题

upload组件属性有很多在这就不在赘述(官网有,简洁明了)本文只介绍一个属性:file-list官网的表述是上传的文件列表, 例如:

[{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]

这个时候就会把url里面文件展示出来,但是真到用的时候还真不是那么简单

第一个用法结合show-file-list(是否展示文件列表)

看一下这段代码

<template>
  <el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }?`);
      }
    }
  }
</script>

这个show-file-list默认为真也就是展示文件列表(属性file-list中包含的文件)

效果图:

如果我们把show-file-list设为false;这个红框内的内容将消失

用法二

如果我的样式并不写在uplaod内,这个时候我们就无法使用elementui提供给我们删除文件的操作。这时候bug就来了。

upload代码

<el-upload class="img-upload" 
  :action="imgUploadUrl"
    accept=".PNG" 
  :on-success="(res, file, fileList) => {UploadSuccess(fileList, item.id);}
    :show-file-list="false" 
  :multiple="true" 
>
  <el-button type="primary" size="mini" class="img-upload-btn">上传</el-button>
</el-upload>
<-- 样式代码 -->
<div>
<button @click="和后端沟通的删除操作">删除</button>
<div>
我自定义的样式展示(像轮播图等等) ,我这里就直接用一个img表示
<img :src="后端返回的图片地址">
<img>
<img>
</div>
</div>

<button>上传按钮写在upload组件内要不然上传也要自己写;

这个时候你点击删除按钮来删除上传的图片,展示图片确实是删除了某一个img但是当你再次点击的时候会把你以前上传的图片都重新上传一遍;

例如

你上传了1 2 3

然后删除了2

当你点再次击上传的时候,上传4

但是效果确实上传了1 2 3 4

导致展示的图片为

1 3 1 2 3 4

这个就是因为你的删除操作并过没有操作到file-list(因为没有写在upload内主要是删除按钮的样式也是自定义的,不能写在upload组件内)

还记的file-list的定义吗---上传的文件列表所以file-list会有1 2 3 4这个几个图片,并且上传的时候会把file-list的东西都上传一遍

解决

大家应该都能想到解决应该就是在自己搞的删除按钮去操作file-list但是完全没必要

看一下我的思路,那就是file-list中保存了我上次(甚至上上次上传的文件)这些保存是完全没有必要的,我们只需要我本次上传的文件,所以我们直接在本次上传完之后去清空file-list = []即可

代码

<el-upload class="img-upload" 
  :action="imgUploadUrl"
    accept=".PNG" 
  :on-success="(res, file, fileList) => {UploadSuccess(fileList, item.id);}
    :show-file-list="false" 
  :multiple="true" 
  :file-list="fileList"> <-- 一定要写上这个属性 -->
  <el-button type="primary" size="mini" class="img-upload-btn">上传</el-button>
</el-upload>
<-- 样式代码 -->
<div>
<button @click="和后端沟通的删除操作">删除</button>
<div>
我自定义的样式展示(像轮播图等等) ,我这里就直接用一个img表示
<img :src="后端返回的图片地址">
<img>
<img>
</div>
</div>
//在data中注册
data() {
    return {
      fileList: [],
    }
}
methods: {
//上传成功的方法
    UploadSuccess(fileList,id){
//写在最后面
        fileList = []清空
    }
}


目录
相关文章
|
10天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
10天前
|
Web App开发 移动开发 运维
跨域解决方案[前端+后端]
跨域解决方案[前端+后端]
22 0
|
11天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
12天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端,其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端,提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求,结合Vue组件展示商品和管理购物车,开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节,但本文为入门提供了基础指导。
|
12天前
|
安全 网络协议 物联网
计算机网络基础教程:类型
【4月更文挑战第5天】
24 2
 计算机网络基础教程:类型
|
13天前
|
传感器 监控 安全
|
13天前
|
存储 网络协议 Linux
|
13天前
|
安全 SDN 数据中心
|
13天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
14天前
|
网络协议 安全 网络性能优化