el-upload 上传附件(拆解步骤)

目录

[1. 看elementui /element-plus 官网案例](#1. 看elementui /element-plus 官网案例)

[2. html部分: 把官网上的搬下来,最好加一个按钮,上传到服务器(后端)](#2. html部分: 把官网上的搬下来,最好加一个按钮,上传到服务器(后端))

[3. js 部分:](#3. js 部分:)

[3.1 首先,先定义一个变量,files](#3.1 首先,先定义一个变量,files)

[3.2 当上传图片时,触发ChangeImage方法](#3.2 当上传图片时,触发ChangeImage方法)

[3.3 点击【上传服务器】,触发UpdateFilesData 方法](#3.3 点击【上传服务器】,触发UpdateFilesData 方法)


案例:

1. 看elementui /element-plus 官网案例

下面内容只表示怎么上传附件且怎么上传到服务器,表格的代码不呈现。

2. html部分: 把官网上的搬下来,最好加一个按钮,上传到服务器(后端)

html 复制代码
  <el-card>
          <el-upload
            drag
            class="upload-demo"
            ref="upload"
            action="#"
            :on-change="ChangeImage"
            :file-list="files"
            :auto-upload="false"
            :show-file-list="true"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
          </el-upload>
        </el-card>
        <el-button
          style="margin-left: 10px;"
          type="success"
          @click="UpdateFilesData"
        >上传到服务器</el-button>

ps:

on-change: 上传文件时调用

file-list: 上传的文件列表,数组格式,在data里面定义变量

auto-upload: 是否在选取文件后立即进行上传

show-file-list:是否显示已上传文件列表

3. js 部分:

3.1 首先,先定义一个变量,files
javascript 复制代码
data(){
  return:{
    files: [],
    formData: null, //附件上传FormData
  }
}
3.2 当上传图片时,触发ChangeImage方法
javascript 复制代码
ChangeImage(file, filelist) {
      console.log(file, "on-change事件", filelist);
      this.files = filelist;
    },

打印结果:

3.3 点击【上传服务器】,触发UpdateFilesData 方法
javascript 复制代码
UpdateFilesData() {
      debugger;
      this.formData = new FormData();
      this.files.forEach((item) => {
        if (!(!item.raw && item.url.indexOf("blob") === -1)) {
          this.formData.append("files", item.raw);
        }
      });
      this.formData.append("FileType", 1); //属于第几个附件上传控件
      this.FilesUpdate(); //调用接口
    },

/*
*  调后端的接口(UploadFile),带参数formData
*/

FilesUpdate() {
      let _this = this;
      this.formData.append("DataID", this.Eid); //属于哪条主表数据
      this.formData.append("MenuID", localStorage.getItem("MenuID")); //属于哪个菜单下
      _this.$EquiApi.UploadFile(this.formData).then((res) => {
        if (res.data.code == 200) {
          this.Refresh(res); //接口返回成功后,调 刷新页面的方法
        }
      });
    },
相关推荐
太阳伞下的阿呆9 分钟前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny21 分钟前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
飞翔的佩奇31 分钟前
基于SpringBoot+MyBatis+MySQL+VUE实现的名城小区物业管理系统(附源码+数据库+毕业论文+开题报告+部署教程+配套软件)
数据库·vue.js·spring boot·mysql·毕业设计·mybatis·小区物业管理系统
chancygcx_37 分钟前
前端框架Vue3(二)——Vue3核心语法之OptionsAPI与CompositionAPI与setup
vue.js·前端框架
烛阴1 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔1 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔1 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔2 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6142 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止3 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix