vue upload上传文件 elementui el-upload vue3 elementuiPlus

vue2 

action

必选参数，上传的地址，可以为空

auto-upload

是否在选取文件后立即进行上传

limit

最大允许上传个数

on-exceed

文件超出个数限制时的钩子

file-list

上传的文件列表,

on-success

文件上传成功时的钩子

on-error

文件上传失败时的钩子

on-change

文件状态改变时的钩子

before-remove

删除文件之前的钩子

<el-upload
  class="uploadDemo"
  :auto-upload="false"
  :limit="5"
  action=""
  :on-exceed="handleExceed"
  :file-list="fileList"
  :on-success="onSuccess"
  :on-error="onError"
  :on-change="onChangeProduct"
  :before-remove="handleRemoveProduct" 
>
  <el-button class="upFileBtn" type="primary">选择文件</el-button>
  <div slot="tip" class="el-upload__tipText">
    温馨提示：最多可同时上传 5个文件，每个文件只允许上传2M大小。 附件仅限于文件名
    <br />
    后缀为.jpg、.png、.gif、.bmp、.jpeg、.tiff、.svg的文件，禁止exe、bat等格式文件上传!
  </div>
</el-upload>

 fileList: [],

handleExceed(files, fileList) {
  this.$message.warning(
    `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
      files.length + fileList.length
    } 个文件`
  );
},
onSuccess(files, fileList) {
  this.$parent.findAllEnterprise();
  this.$message({
    message: "成功",
    type: "success",
  });
  this.handlerClose();
},
onError() {
  this.$message({
    message: "网络错误",
    type: "warning",
  });
},
handleRemoveProduct(file, fileList) {
  return this.$confirm(`确定移除 ${file.name}？`).then(() => {
    this.fileList.pop(file);
  });
},
onChangeProduct(file, fileList) {
  if (/.(jpg|png|gif|bmp|jpeg|tiff|svg)$/.test(file.name)) {
    // 当选择好上传文件时，将这个文件的信息push到数组中去
    this.fileList.push(file.raw);
  } else {
    this.$message({
      message: "请注意附件温馨提示",
      type: "warning",
    });
    fileList.pop(file);
    return;
  }
},

 点击上传按钮   将表单和文件一起上传

reportCommon() {
  const formData = new FormData(); // 转换成formDate格式进行传参
  for (let i = 0; i < this.fileList.length; i++) {
    formData.append(`multipartFile`, this.fileList[i]);
  }
  for (let i in this.reportInfo) {  // for in  快速赋值（在参数多的情况下）
    formData.append(i, this.reportInfo[`${i}`]); // 命名的字段和后台需要的字段需要一致
  }
  const reportCode = this.$_post("***", formData);  // 接口传参需要formDate形式
  if (reportCode.code == 200) {
    this.$message.success("****");
  } 
},

下面是在vue3里面使用方法

<el-upload
  ref="useUpload"  // 需要与定义的 变量/常量 保持一致
  style="width: 761px"
  class="upload-demo value"
  action="#"
  :limit="1"  // 设置限制 最大一个 因为我这边就需要上传一个
  :on-exceed="useHandleExceed"  // 超过限制长度调用方法
  :on-change="useHandleChange"  // 文件改变执行的方法  第一次上传也调用
  :on-remove="useHandleRemove"  // 文件删除执行的方法 默认文件删除也调用
  :auto-upload="false"
  :file-list="useFileList"  // 默认文件组  方便回显/再次编辑使用 
>
  <template #trigger>
    <div class="upUseFile"></div> <!-- 这里是一个图片样式 -->
  </template>
</el-upload>

// 引入需要的类型 （接口）
import type {UploadInstance, UploadProps, UploadRawFile} from "element-plus";

// 定义默认组
const useFileList = ref([]);

// 定义常量
const useUpload = ref<UploadInstance>();

// 删除事件 默认组删除也会调用此方法
const useHandleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  // 因为后台返来的数据不太好处理 如果用户删除了此文件 就传空文件 没删除就不传
  const newFile = new File([], "");
  editTableCont.value.instructionsFile = newFile;
};

// 文件改变事件 改变就执行这个 
const useHandleChange: UploadProps["onChange"] = (uploadFile, uploadFiles) => {
  // 将得到的值进行赋值
  editTableCont.value.instructionsFile = uploadFile.raw;
};

// 文件超出限制进行调用
const useHandleExceed: UploadProps["onExceed"] = (files) => {
  // 因为是只上传一个文件 所以就直接清空内容
  useUpload.value!.clearFiles();
  // 将文件列表里面的第一个赋值给file
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  // 手动赋值 file
  useUpload.value!.handleStart(file);
};


// 接口方法  下面是进行显示的 算是半个死的 只是显示作用
...{
   if ('文件路径' != null) {
      useFileList.value[0] = {
         name: '文件名',
         url: '文件路径',
      };
   }
}