vue开发者必看!基于element实现文件上传功能的完整教程

前言

web 应用中,文件上传已经成为了一个必不可少的功能。本文将介绍如何使用 vueelement 实现简单而强大的文件上传功能,让你的 web 应用更加出色!


实现思路

其实基于 element 已经封装好的内容,通过 el-upload 组件的属性,实现上传的操作还是很易如拾芥的。我们只需要请求接口上传图片,上传成功后,将后台返回的 url 回显到页面即可。

传递参数

在这里插入图片描述

返回数据

在这里插入图片描述


用到的属性

属性描述
accept接受上传的文件类型(thumbnail-mode 模式下此参数无效)
action必选参数,上传的地址
http-request覆盖默认的上传行为,可以自定义上传的实现
show-file-list是否显示已上传文件列表

实现效果

在这里插入图片描述


完整代码

<template>
  <div class="parentBox">
    <el-upload :accept="acceptAstrict" class="avatar-uploader" action="#" :http-request="uploadFiles" :show-file-list="false">
      <div class="iconBox">
        <i title="点击上传图片" v-if="!imgUrl" class="el-icon-plus avatar-uploader-icon"></i>
      </div>
    </el-upload>
    <el-image v-if="imgUrl" :src="imgUrl" :preview-src-list="[imgUrl]"></el-image>
    <div title="点击删除图片" v-if="imgUrl" class="gbtpBox" @click="imageRemove"><span>×</span></div>
  </div>
</template>
<script>
import { uploadFiles } from '@api/zjmj/zdqyjg'//引入的接口文件
export default {
    data() {
        return {
            acceptAstrict: '.jpg,.jpeg,.png,.JPG,.PNG', //文件上传限制
            imgUrl: '' //图片地址
        }
    },
    methods: {
        //上传图片
        uploadFiles(file) {
            // 调用文件大小校验方法
            if (this.beforeUpload(file.file)) {
                this.formData = new FormData()
                this.formData.append('file', file.file)
                // 请求接口
                uploadFiles(this.formData).then((res) => {
                    if (res.code == '10000') {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        // 图片赋值
                        this.imgUrl = res.data.realPath
                    } else {
                        // 错误信息
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                })
            }
        },
        // 文件大小校验
        beforeUpload(file) {
            if (file.size > 10 * 1024 * 1024) {
                this.$message('文件过大,请上传小于10MB的文件〜')
                return false
            }
            return true
        },
        // 删除图片
        imageRemove() {
            this.imgUrl = ''
            this.$message({
                message: '删除图片成功',
                type: 'success'
            })
        }
    }
}
</script>
<style scoped>
.parentBox {
    padding: 20px;
}
.iconBox i {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #8c939d;
    font-weight: bold;
    border: 1px #8c939d dashed;
    border-radius: 4px;
    background: rgb(251, 253, 255);
}
.iconBox i:hover {
    border: 1px rgb(64, 158, 255) dashed;
}
.el-image {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    border: 1px solid rgb(192, 204, 218);
}
.gbtpBox {
    position: relative;
}
.gbtpBox span {
    position: absolute;
    top: -110px;
    left: 90px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    background: rgb(245, 108, 108);
    color: #fff;
}
.gbtpBox span:hover {
    background: rgb(247, 137, 137);
    color: #fff;
}
::v-deep .avatar-uploader {
    height: 0px;
}
</style>

上传多张

上面我们实现的只能上传一张图片,那如果需求是可上传多张图片,就需要下面这种方式。

用到的属性

属性描述
multiple是否支持多选文件
on-exceed文件超出个数限制时的钩子
on-remove文件列表移除文件时的钩子
limit最大允许上传个数
before-upload上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。
http-request覆盖默认的上传行为,可以自定义上传的实现
list-type文件列表的类型
on-preview点击文件列表中已上传的文件时的钩子
:class=“{hideShow: hideUpload}”当上传超过限制数量时,通过动态样式显隐上传图标

实现效果

在这里插入图片描述


完整代码

<template>
  <div class="parentBox">
    <el-upload :class="{hideShow: hideUpload}" :multiple="true" :on-exceed="onExceed" :on-remove="handleRemove" :limit="limit"
      :before-upload="beforeUpload" action="" :http-request="uploadFiles" list-type="picture-card" :on-preview="handlePictureCardPreview">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="imgUrl">
    </el-dialog>
  </div>
</template>
<script>
import { uploadFiles } from "@api/records";
export default {
  data() {
    return {
      limit: 3, //最大上传数量
      dialogVisible: false, //预览图片框
      imgUrl: "", // 图片地址
      fileList: [], //图片数组
    };
  },
  // 上传超过限制后隐藏上传图标
  computed: {
    hideUpload() {
      console.log(this.fileList.length);
      console.log(this.limit);
      return this.fileList.length >= this.limit;
    },
  },
  methods: {
    //上传图片方法
    uploadFiles(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      // 请求接口
      uploadFiles(formData).then((res) => {
        if (res.code == "10000") {
          this.fileList.push({
            uid: file.file.uid,
            url: res.data,
          });
          console.log(this.fileList);
          this.$message({
            message: res.msg,
            type: "success",
          });
        } else {
          // 错误信息
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 预览当前图片
    handlePictureCardPreview(file) {
      this.imgUrl = file.url;
      this.dialogVisible = true;
    },
    // 删除当前图片
    handleRemove(file, fileList) {
      let index = this.fileList.findIndex((item) => {
        return item.uid === file.uid;
      });
      this.fileList.splice(index, 1);
    },
    // 当前上传图片大小格式校验
    beforeUpload(file) {
      let fileArr = file.name.split(".");
      let suffix = fileArr[fileArr.length - 1];
      if (!/(jpg|jpeg|png|JPG|PNG|gif|GIF)/i.test(suffix)) {
        this.$message("图片格式不正确");
        return false;
      }
      if (file.size > 10 * 1024 * 1024) {
        this.$message.warning("图片大小不能超过 10MB!");
        return false;
      }
      return true;
    },
    // 文件上传超出个数
    onExceed(files, fileList) {
      this.$message(`最多上传 ${this.limit} 张图片`);
    },
  },
};
</script>
<style scoped>
::v-deep .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 109px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
}
/* 上传超过限制后隐藏上传图标 */
::v-deep .hideShow .el-upload--picture-card {
  display: none;
}
</style>

多次调用

这种情况多用于一个表单中有很多个上传的组件,在上传和删除都调用接口(以下案例上传成功后返回的信息就是删除所需要的参数),最后提交时就不用携带上传的数据了。

完整源码

<template>
  <div>
    <el-upload :file-list="xszzp" :before-remove="setDataBeforeRemove" :multiple="true" :on-exceed="onExceed" :on-remove="xszzpRemove"
      :limit="5" :before-upload="beforeUpload" action="#" :http-request="xszzpFiles" list-type="picture-card"
      :on-preview="handlePictureCardPreview">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>
<script>
import { uploads, deleteFiles } from "@/api/inspection/index";
export default {
  data() {
    return {
      imgMap: new Map(),
      xszzp: [], //存放图片的数组
    };
  },
  mounted() {
    // 模拟回显
    this.xszzp = [
      {
        checklistId: 32,
        url: "http://119.253.35.74:39000/defaults/20230320/4CD40BABF4B14231AF07E58DC78301C8.png",
        id: 202,
        moduleId: 54,
        name: "20230320/4CD40BABF4B14231AF07E58DC78301C8.png",
        realPath: "20230320/4CD40BABF4B14231AF07E58DC78301C8.png",
        type: 1,
      },
      {
        checklistId: 12,
        url: "http://119.253.35.74:39000/defaults/20230320/2B1D3E48A01A4BD8B0FB97FE0047A01D.png",
        id: 203,
        moduleId: 43,
        name: "20230320/2B1D3E48A01A4BD8B0FB97FE0047A01D.png",
        realPath: "20230320/2B1D3E48A01A4BD8B0FB97FE0047A01D.png",
        type: 1,
      },
    ];
    //接口回显
    // taskCarView() {
    //   taskCarView().then((res) => {
    //     if (res.code == "10000") {
    //       this.ruleForm = res.data;
    //       // 行驶证回显
    //       if (res.data.xszImg) {
    //         res.data.xszImg.forEach((item) => {
    //           this.xszzp.push({
    //             checklistId: item.checklistId,
    //             url: item.enclosure,
    //             id: item.id,
    //             moduleId: item.moduleId,
    //             name: item.realPath,
    //             realPath: item.realPath,
    //             type: item.type,
    //           });
    //         });
    //       }
    //     }
    //   });
    // },
  },
  methods: {
    // 上传图片
    xszzpFiles(file) {
      // uid 是唯一的
      let uid = file.file.uid;
      let formData = new FormData();
      formData.append("file", file.file);
      uploads(formData).then((res) => {
        if (res.code == "10000") {
          this.imgMap.set(uid, res.data);
          this.$message({
            message: res.msg,
            type: "success",
          });
        }
      });
    },
    // 删除行驶证照片
    xszzpRemove(file, flist) {
      let uid = file.uid;
      let targetImg = this.imgMap.get(uid);
      // 删除所需的参数
      let params = {
        id: targetImg.id,
        filePath: targetImg.realPath,
      };
      // 请求接口
      deleteFiles(params).then((res) => {
        if (res.code == "10000") {
          this.$message({
            message: res.msg,
            type: "success",
          });
        }
      });
    },
    //对于回显的数据删除之前,先获取图片数据存储到imgMap,用来给接口传id和url(公共)
    setDataBeforeRemove(file, fileList) {
      let uid = file.uid;
      if (file.status == "success") {
        //此状态为回显的数据
        if (!this.imgMap.hasOwnProperty(uid)) {
          this.imgMap.set(uid, file);
        }
      }
    },
    // 当前上传图片大小格式校验
    beforeUpload(file) {
      let fileArr = file.name.split(".");
      let suffix = fileArr[fileArr.length - 1];
      if (!/(jpg|jpeg|png|JPG|PNG|gif|GIF)/i.test(suffix)) {
        this.$message("图片格式不正确");
        return false;
      }
      if (file.size > 10 * 1024 * 1024) {
        this.$message.warning("图片大小不能超过 10MB!");
        return false;
      }
      return true;
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.imgDialog.dialogRow = file.url;
      this.imgDialog.dialogLsattr = true;
    },
    // 文件上传超出个数
    onExceed() {
      this.$message(`最多上传 5 张图片`);
    },
  },
};
</script>

相关推荐

element表格上传图片必看:如何避免全行上传?
让图片上传变得更简单:vue和vant的完美融合
小程序开发攻略:如何优雅地实现图片上传?

  • 12
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 基于 Spring Boot,MyBatis Plus和Vue的开发框架是现代Web应用开发的主要选择之一。Spring Boot是一个轻量级的Java开发框架,提供了快速构建独立应用程序所需的所有功能。它简化了传统的Spring应用程序开发过程,让开发者能够更专注于业务逻辑。 MyBatis Plus是一个对MyBatis进行封装的工具,提供了更简单、更方便的方式来操作数据库。它使用注解和代码生成器来减少开发时间,使得数据库操作更加高效和可维护。 Vue是一个流行的JavaScript框架,用于构建用户界面。它的特点是轻量级、易于学习和使用,并且具有非常高的性能。Vue可以与服务器端的后端框架(如Spring Boot)无缝集成,在前后端分离的项目中,提供了极佳的开发体验。 使用基于Spring Boot,MyBatis Plus和Vue的开发框架,开发者可以快速搭建一个完整的Web应用。首先,使用Spring Boot来创建后端应用,配置数据源和集成MyBatis Plus以简化数据库操作。然后,使用Vue来创建用户界面,通过REST API与后端进行通信。 这个开发框架的优点是集成了强大的Java后端和灵活的JavaScript前端开发者可以使用多种技术栈来完成各种功能。同时,Spring Boot提供了很好的项目结构和配置管理,MyBatis Plus简化了数据库操作,Vue提供了丰富的界面组件和开发工具,整合后的开发框架提供了高效、可维护和可扩展的开发环境。 总之,基于Spring Boot,MyBatis Plus和Vue的开发框架提供了一种现代化、高效和灵活的Web应用开发方式。它适用于各种规模的项目,可以提高开发效率,降低维护成本,并且提供良好的开发体验。 ### 回答2: 基于Spring Boot、MyBatis Plus和Vue框架的开发可以实现一个完整的前后端分离的应用。以下是具体方面的解释: 1. Spring Boot是一个快速开发的Java框架,可以轻松搭建后端服务器。它提供了自动配置、快速开发等功能,大大简化了Java后端开发的步骤。 2. MyBatis Plus是一个基于MyBatis的增强工具,可以简化与数据库的交互。它提供了更简单的API、更强大的查询功能和代码生成等特性,可以极大提高后端开发的效率。 3. Vue是一个流行的前端框架,用于构建用户界面。它具有简单易学、灵活和高性能等特点,可以帮助我们编写交互式、响应式的前端应用。 基于这三个框架的组合,可以实现前后端完全分离的开发模式。后端使用Spring Boot搭建服务器,处理业务逻辑,并与数据库进行交互。MyBatis Plus可以简化与数据库的交互,提供了更简单的CRUD操作和强大的查询功能前端使用Vue进行开发,可以实现灵活的用户界面。通过Restful API与后端进行通信,实现数据的交互。 总而言之,基于Spring Boot、MyBatis Plus和Vue的开发模式,可以高效地实现前后端分离的应用。后端使用Spring Boot提供服务,MyBatis Plus简化数据库交互,前端使用Vue构建用户界面。这种组合可以提高开发效率,让开发人员更专注于业务逻辑的实现。 ### 回答3: 基于Spring Boot,MyBatis Plus和Vue的开发,可以实现一个全栈的Web应用程序。 Spring Boot是一个基于Spring框架的快速开发工具,它简化了Spring项目的配置,提供了一套约定大于配置的开发模式。使用Spring Boot可以快速搭建一个Web应用程序的后端,处理数据层和业务逻辑。 MyBatis Plus是基于MyBatis框架之上的增强工具,它进一步简化了在Java应用程序中操作数据库的流程。MyBatis Plus提供了很多常用的功能和特性,如代码生成器、自动填充、分页插件等,可以极大地提高开发效率。 Vue是一种现代化的JavaScript框架,用于构建用户界面。它提供了一套响应式组件系统和强大的工具集,可以帮助开发者快速构建单页应用程序。Vue可以与其他后端技术,如Spring Boot和MyBatis Plus一起使用,实现前后端分离的开发模式。 在基于这些技术的开发过程中,可以将后端的数据处理和业务逻辑实现放在Spring Boot中,使用MyBatis Plus进行数据库操作。前端使用Vue构建用户界面,并通过异步请求与后端进行数据交互。通过这种方式,可以实现一个功能完善的全栈Web应用程序。 使用Spring Boot和MyBatis Plus可以快速搭建后端框架,并提供强大的数据库操作能力。而Vue作为前端框架,可以提供友好的用户界面和交互体验。通过这些技术的结合,可以实现高效、灵活的全栈开发,为用户提供优质的应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值