el-upload手动上传及使用oss批量上传

<template>
  <div>
    <el-form
      ref="formData"
      class="formWidth"
      :model="formData"
      label-width="120px"
      :rules="rules"
    >
      <el-form-item label="文件" class="uploadClass" required prop="fileList">
        <el-upload
          class="upload-demo"
          action="#"
          :on-change="handleChange"
          :auto-upload="false"
          accept=".jpg, .jpeg, .png, .jfif"
          :on-remove="handleRemove"
          :file-list="formData.fileList"
          :on-exceed="handleExceed"
          :limit="5"
          multiple
        >
          <el-button size="small" type="primary">选择文件</el-button>
          <div slot="tip" class="el-upload__tip">
            格式:jpg/png/jfif,限制5个文件
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-button @click="confirmInfo()">保存</el-button>
  </div>
</template>

<script>
export default {
  name: 'Untitled-1',
  props: {},
  components: {},
  data() {
    return {
      formData: {
        fileList: [],
        code: "",
        name: "",
      },
      rules: {
        name: [{ required: true, message: "请输入文件" }],
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
     // 上传之前校验
     handleChange(file, fileList) {
      let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
      let typeInfo = ["jpg", "jpeg", "png", "jfif"];
      fileName = fileName.toLowerCase();
      if (!typeInfo.includes(fileName)) {
        this.$message({
          type: "warning",
          message: "请上传jpg/png/jfif格式的图片",
        });
        // 过滤掉不符合条件的文件
        this.formData.fileList = this.formData.fileList.filter(
          (list) => list.uid != file.uid
        );
        return false;
      }
      // 存储符合条件的所有fileList数据
      this.formData.fileList = fileList; // 存储上传的文件
      // const isLt2M = file.size < 1024 * 1024 * 3;
      // const isLt2M = file.size < 1024 * 1024 * 30;
      // if (!isLt2M) {
      //   this.$message({
      //     type: "warning",
      //     message: "上传图片大小不能超过30M",
      //   });
      //   return false;
      // }
    },
    handleRemove(file, fileList) {
      // 执行移除方法的时候重新更新数据
      this.formData.fileList = fileList;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
     // 确认上传
     async confirmInfo() {
      // 整体表单校验
      this.$refs.formData.validate(async (valid) => {
        if (!valid) {
          return false;
        }
        let pathUrl = [],
          i = 0;
        for (let list of this.formData.fileList) {
          let targetRoute = `aaa/${list?.name}`;
          // oss上传文件封装的方法
          await putFile(targetRoute, list.raw);
          // 第一次上传oss的时候延迟5ms，用于oss上传函数请求成功并获得返回值，防止循环请求oss token获取函数
          if (i == 0) await this.delay(500);
          pathUrl.push(targetRoute);
          i++;
        }
        console.log('pathUrl---',pathUrl)
      });
    },
    // 延迟函数
    async delay(ms) {
      return new Promise((resolve) => {
        setTimeout(resolve, ms);
      });
    },
  },
}
</script>

<style scoped></style>