基于element实现文件（资源）上传 - 好用

最新推荐文章于 2024-07-11 15:44:23 发布

学而时习之不亦说乎。

最新推荐文章于 2024-07-11 15:44:23 发布

阅读量1k

点赞数 2

分类专栏： vue js html 文章标签： javascript 前端 vue.js elementui

本文链接：https://blog.csdn.net/boundle_ss/article/details/122185953

版权

js 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

vue

19 篇文章 1 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

这是一个关于文件上传的前端代码示例，详细规定了上传文件的大小、格式、数量限制，支持多种类型的文件，包括视频、音频、图片、文档等，并提供了文件预览、删除和上传状态提示等功能。代码中使用了Element UI组件库，实现了上传过程中的错误处理和文件类型检查。

摘要由CSDN通过智能技术生成

自定义上传规则按需定义：

1.总大小不可超出200M

2.文件上传不重复

3.支持文件格式（ "mp4", "MP4", "mov", "MOV","mp3","MP3","jpg", "JPG","png","PNG","jpeg","JPEG","bmp",

"BMP","txt", "TXT","text","TEXT","doc", "DOC","docx","DOCX","xls","XLS","xlsx", "XLSX",

"ppt", "PPT","pptx", "PPTX", "pdf", "PDF"）

4.最多可选10个文件

5.图片不可超出10M

多种文件上传时需要后端支持把文件编译成前端能浏览的！

上传代码

<template>
  <div class="ceshi">
    <div class="top">
      <span class="title">资源</span>
      <!-- <el-button>从课表选择</el-button> -->
    </div>
    <div class="content">
      <el-form ref="form" :rules="formrules" :model="form" label-width="100px">
        
        <el-form-item label="附件" class="file_updata">
          <div class="text_form">
            <div
              class="datanull"
              v-if="form.eduCloudLiveResoureList.length < 1"
            >
              <svg class="icon myIconStylea" aria-hidden="true">
                　　
                <use xlink:href="#icon-a-shangchuan2"></use>
              </svg>
              <p>最多可选择10个文件</p>
            </div>
            <ul v-else>
              <li
                @click.stop="preview(index, 'file')"
                v-for="(files, index) in form.eduCloudLiveResoureList"
                :key="files.id"
              >
                <svg
                  class="icon deletefile"
                  @click.stop="deletefile(files, index)"
                  aria-hidden="true"
                >
                  <use xlink:href="#icon-a-GroupCopy8beifen"></use>
                </svg>
                <div
                  v-if="
                    files.fileSuffix == 'jpg' ||
                    files.fileSuffix == 'png' ||
                    files.fileSuffix == 'jpeg' ||
                    files.fileSuffix == 'bmp'
                  "
                >
                  <img :src="files.convert_path" alt="" />
                </div>
                <!-- 视频 -->
                <div
                  v-if="
                    files.fileSuffix == 'MP4' ||
                    files.fileSuffix == 'mp4' ||
                    files.fileSuffix == 'mov'
                  "
                >
                  <svg class="icon myIconStylea" aria-hidden="true">
                    　　
                    <use xlink:href="#icon-a-bianzu23"></use>
                  </svg>
                </div>
                 <!-- 音频 -->
                <div
                  v-if="files.fileSuffix == 'MP3' || files.fileSuffix == 'mp3'"
                >
                  <svg class="icon myIconStylea" aria-hidden="true">
                    　　
                    <use xlink:href="#icon-a-PPT1beifen5"></use>
                  </svg>
                </div>
               <!-- 文本档 -->
                <div
                  v-if="files.fileSuffix == 'text' || files.fileSuffix == 'txt'"
                >
                  <svg class="icon myIconStylea" aria-hidden="true">
                    　　
                    <use xlink:href="#icon-a-GroupCopy5"></use>
                  </svg>
                </div>
               <!-- xls -->
                <div
                  v-if="files.fileSuffix == 'xls' || files.fileSuffix == 'xlsx'"
                >
                  <svg class="icon myIconStylea" aria-hidden="true">
                    　　
                    <use xlink:href="#icon-a-Group52"></use>
                  </svg>
                </div>
                 <!-- docx -->
                <div
                  v-if="files.fileSuffix == 'doc' || files.fileSuffix == 'docx'"
                >
                  <svg class="icon myIconStylea" aria-hidden="true">
                    　　
                    <use xlink:href="#icon-a-Group23"></use>
                  </svg>
                </div>
                <!-- PDF -->
                <div
                  v-if="files.fileSuffix == 'PDF' || files.fileSuffix == 'pdf'"
                >
                  <svg class="icon myIconStylea" aria-hidden="true">
                    　　
                    <use xlink:href="#icon-a-Group7"></use>
                  </svg>
                </div>
                <!-- ppx -->
                <div
                  v-if="files.fileSuffix == 'ppt' || files.fileSuffix == 'pptx'"
                >
                  <svg class="icon myIconStylea" aria-hidden="true">
                    　　
                    <use xlink:href="#icon-Group6Copy"></use>
                  </svg>
                </div>
               
                <p>{{ files.fileName }}</p>
              </li>
            </ul>
          </div>

          <el-upload
            class="upload-demo"
            :action="api + uploadVideoUrl"
            :data="mySkyFileParam"
            :headers="Headers"
            :on-error="handlefileerror"
            :on-success="handleupfileOK"
            :before-upload="beforeAvatarUploadexcel"
            :show-file-list="false"
            name="files"
          >
            <span class="updatafile">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-Group"></use>
              </svg>
              添加附件
            </span>
          </el-upload>
        </el-form-item>
        
      </el-form>
    </div>
    <div class="yesbtn">
      <el-button >确定</el-button>
    </div>
    <!-- loading 动画 -->
    <loading class="loadingstat" title="上传中..." v-show="loadingstate"></loading> 
    <!-- 文件预览框 -->
    <filedialog
      style="z-index: 3000"
      ref="stidemt_preview"
      v-if="dialogVisible"
      @esc="esc"
      :img_state="img_state"
      :ind="ind"
    ></filedialog>
  </div>
</template>
<script>
import {  delfileInfo } from "@/api/teaching";//文件删除接口
import { getschoolId, getUuid, getToken,getuserName } from "@/utils/auth";
import filedialog from "@/components/dialog_praticulars";
import loading from "@/components/loading";
export default {
  components: {
    loading,
    filedialog,
  },
  data() {
    return {
      img_state: "",
      ind: "",
      dialogVisible :false,
      loadingstate :false,
      api: window.g.BASE_API,
      uploadVideoUrl: "/edu/previewWorkUp/uploadInteractive",//上传接口
      // 传参
      Headers: {
        access_token: getToken(),
      },
      // 传参
      mySkyFileParam: {
        fileType: 5,
        convertType: 1,
      },
      form: {
        eduCloudLiveResoureList: [
          // 资源
          // {
          //     absolutePath: "", // 绝对路径
          //     relativePath: "",// 相对路径
          //     rescoureName: "",// 资源名称
          //     resoureType: "",// 资源类型
          // }
        ],
      },
      formrules: {},
    };
  },
  watch: {
    
  },
  methods: {
    // 预览
    preview(index, typea) {
      this.ind = parseInt(index);
      this.img_state = typea;
      this.dialogVisible = true;
      this.$store.commit("Save_preview", this.form.eduCloudLiveResoureList);
      this.$nextTick(() => {
        this.$refs.stidemt_preview.setinitdate();
      });
    },
    // 关闭预览
    esc() {
      this.dialogVisible = false;
    },
    // 文件上传完成方法
    handleupfileOK(res, upfileList) {
      this.loadingstate = false;
      this.$set(res.data[0], "file_ext", res.data[0].fileSuffix);      //文件类型
      this.$set(res.data[0], "relativePath", res.data[0].fileAccpath); //相对路径
      this.$set(res.data[0], "absolutePath", res.data[0].fileAllpath); //绝对路径
      this.$set(res.data[0], "convertpath", res.data[0].convertPath);  //文件解析后的路径不解析的返回相对路径
      this.$set(res.data[0], "rescoureName", res.data[0].fileName);    //资源名称
      this.$set(
        res.data[0],
        "convert_path",
        this.api + "/resDir"+ res.data[0].convertpath
      );
      if (res.code === 200) {
        this.form.eduCloudLiveResoureList.push(res.data[0]);
        this.$message({
          message: "上传成功",
          type: "success",
          center: true,
        });
      }
    },
    // 删除上传文件
    deletefile(item, index) {
       if (this.term == 1) {
        //编辑

      }else{
        //  创建
        let list = []
        list.push(item.resId)
        delfileInfo({ fileId:list}).then(res=>{ })  
      }
      this.form.eduCloudLiveResoureList.splice(index, 1);
    },
    handlefileerror(res) {
      this.loadingstate = false;
      this.$message({
        message: "上传失败",
        type: "error",
        center: true,
      });
    },
    // 附件上传文件处理支持格式
    beforeAvatarUploadexcel(file) {

      this.fileMaxSize += file.size; /// 1024 / 1024;
      if (this.fileMaxSize / 1024 / 1024 > 200) {
        this.fileMaxSize -= file.size;
        this.$message({
          message: "附件不可超出200M",
          type: "warning",
          center: true,
        });
        this.loadingstate = false;
        return false;
      }
      // 文件上传重复
      let repetition= 0
      this.form.eduCloudLiveResoureList.forEach((itme,index)=>{
        if (itme.fileName==file.name) {
          this.$message({
            message: "文件上传重复",
            type: "warning",
            center: true,
          });
          this.loadingstate = false;
          repetition = 1;
          return false
        }
      })
      if (repetition) { return false}

      let index = file.name.lastIndexOf(".");
      let extension = file.name.substr(index + 1);
      let extensionList = [
        "mp4",
        "MP4",
        "mov",
        "MOV",
        "mp3",
        "MP3",
        "jpg",
        "JPG",
        "png",
        "PNG",
        "jpeg",
        "JPEG",
        "bmp",
        "BMP",
        "txt",
        "TXT",
        "text",
        "TEXT",
        "doc",
        "DOC",
        "docx",
        "DOCX",
        "xls",
        "XLS",
        "xlsx",
        "XLSX",
        "ppt",
        "PPT",
        "pptx",
        "PPTX",
        "pdf",
        "PDF",
      ];
      let extensionList_IMG = ["jpg",'JPG', "png",'PNG', "jpeg",'JPEG', "bmp",'BMP'];
      const isLt2M = file.size / 1024 / 1024 < 200;
      if (!isLt2M) {
        this.$message({
          message: "附件不可超出200M",
          type: "warning",
          center: true,
        });
        this.loadingstate = false;
        return false;
      } else if (extensionList.indexOf(extension) < 0) {
        this.$message({
          message: "当前文件格式不支持",
          type: "error",
          center: true,
        });
        this.loadingstate = false;
        return false;
      } else {
        if (this.form.eduCloudLiveResoureList.length==10) {
          this.$message({
              message: "最多可选10个文件",
              type: "error",
              center: true,
            });
          this.loadingstate = false;
          return false;
        }
       
      }
      if (extensionList_IMG.indexOf(extension) >= 0) {
        if (file.size / 1024 / 1024 > 10) {
          this.$message({
            message: "图片不可超出10M",
            type: "warning",
            center: true,
          });
          this.loadingstate = false;
          return false;
        }
      } 

      this.loadingstate = true;
    },
  },
  created() {
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import './index.styl';
</style>