vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

上传文档格式

<template>
  <div>
    <div class="upload">
      <div>
        <div
          class="forPreview_doc"
          v-for="(item, index) in uploadDocList"
          :key="index"
        >
          <img src="../../assets/img/resource_doc_b@2x.png" alt="" />
          <span>{{ item.name }}</span>
          <span>{{ item.size | formatSize }}</span>
          <van-icon name="delete" @click="delBtn(index)" class="delte" />
        </div>
        <van-uploader
          v-show="uploadDocList.length < 2"
          preview-size="80px"
          accept=".doc, .docx, .xml, .xlsx, .pdf"
          :before-read="beforeRead"
          :after-read="afterRead"
        ></van-uploader>
      </div>

      <div class="diy-submit">
        <van-button @click="doSubmit($event)">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { uploadFile, addResources } from "../../http/mock";
import Toast from "vant";
export default {
  name: "uploadFile",

  data() {
    return {
      tagList: [],
      uploadTitle: "",
      currentTag: null,
      tagId: null,
      columnName: localStorage.getItem("columnName"),
      fileIdArr: [],

      uploadDocList: [], // 选中的上传文档列表
    };
  },
  filters: {
    formatSize(val) {
      // 格式化文件大小
      if (val > 0) {
        return (val / 1024 / 1024).toFixed(2) + "M";
      } else {
        return "0M";
      }
    },
  },
  methods: {
    // vant上传文件前校验文件事件
    // 文件选中后先提交给后台，后台根据选中的文件，返回数组（这一业务根据后台而定）
    beforeRead(file) {
      let formData = new FormData(); // 为上传文件定义一个formData对象
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      this.uploadDocList.push(file);
      this.uploadDocList.forEach((item) => {
        formData.append(item.name, item);
      });

      // formData.append(file.name, file); // 单个文件上传时可以这么写，上面的foreach就可以删掉
      this.$api
        .post(uploadFile, formData, config)
        .then((res) => {
          this.fileIdArr = res.data.data; // 把選中的文件傳送給後台
        })
        .catch((err) => {
          Toast("文件上傳失敗！");
        });
    },
    // 删除待上传的文件
    delBtn(index) {
      if (isNaN(index) || index >= this.uploadDocList.length) {
        return false;
      }
      let tmp = [];
      for (let i = 0; i < this.uploadDocList.length; i++) {
        if (this.uploadDocList[i] !== this.uploadDocList[index]) {
          tmp.push(this.uploadDocList[i]);
        }
      }
      this.uploadDocList = tmp;
    },
    doSubmit() {
      let params = {
        classify: this.tagId, // 针对视频资源时对应的分类id
        file: this.fileIdArr, // 选择完文件后，调用uploadFile这个接口，后端返回的数组
        resourceColumnId: JSON.parse(localStorage.getItem("columnId")), // 资源栏目id(视频、图片、音频、文档)
        title: this.uploadTitle, // 上传时填写的标题
      };

      this.$api
        .post(addResources, params)
        .then((res) => {
          if (res.data.code === 1001) {
            this.$router.push({ name: "myResourceClassify" });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.upload {
  padding: 140px 36px 160px 36px;
  box-sizing: border-box;
}

.forPreview_video {
  position: relative;
  /*background: rgba(0,0,0,.7);*/
  video {
     95%;
    max-height: 430px;
  }
  .delte {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.forPreview_doc,
.forPreview_audio {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  img {
     56px;
    height: 56px;
    margin-right: 20px;
  }
  span:nth-of-type(1) {
    flex: 1;
  }
  span:nth-of-type(2) {
    margin-right: 20px;
  }
}
.forPreview_pic {
  display: flex;
  align-items: flex-end;
  img {
     160px;
    height: 160px;
  }
}

.diy-detail {
   100%;
  overflow: hidden;

  .btn {
    span {
      margin-bottom: 10px;
    }
  }
  .van-cell {
    background-color: #f0f0f0;
    border-radius: 35px;
    font-size: 26px;
    height: 69px;
    line-height: 69px;
    padding: 0 22px;
    color: #999;
  }
  .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border- 0;
  }
  p {
    height: 64px;
    line-height: 64px;
    font-size: 32px;
    color: #333;
    position: relative;
    padding-left: 16px;
  }
  p::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "*";
    color: #ff0000;
  }

  span {
    display: inline-block;
     157px;
    background: #f0f0f0;
    border-radius: 35px;
    color: #999;
    font-size: 26px;
    padding: 14px 18px;
    margin-right: 28px;
    text-align: center;
  }
  .active {
    color: #fff;
    background: linear-gradient(to right, #fd5130, #fa6c34);
  }
}
.diy-submit {
  position: fixed;
  height: 150px;
   90%;
  bottom: 0;
  background: #fff;

  .van-button {
     100%;
    height: 90px;
    border-radius: 45px;
    font-size: 36px;
    color: #fff;
    background: linear-gradient(to right, #fd5130, #fa6c34);
    top: 50%;
    transform: translate(0, -50%);
  }
  .van-button--default {
    border: none;
  }
}
</style>

https://www.jb51.net/article/171972.htm