2024年Web前端最全[Vue] 写一个简单的文件上传控件_vue 上传控件，百度前端面试难度大吗

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在App.vue中添加核心的控件 

接着添加属性，注意我们将用自己的方法upload替换el-upload中的上传操作，因此设置action=“/”,

:http-request=“upload”,如下：

<el-upload
      ref="upload"
      :limit="10"
      multiple
      action="/"
      :http-request="upload">
</el-upload>

在script中添加上传Dto：一些业务相关的数据在这里定义 比如ownerUserId， fileContainerName等，这些数据可以通过表单与文件数据一并上传

export class CreateFileDto {
  id: string;
  fileContainerName: string; //文件夹名称
  parentId: string;          //文件的父Id
  ownerUserId: number;        //文件的归属用户Id
  fileName: string;
  mimeType: string;
  fileType: number; //文件类型 0：文件夹，1：普通文件
  file: any;        //文件数据
}

method中添加一些帮助类函数：

methods: {
  successMessage(value = "执行成功") {
      this.$notify({
        title: "成功",
        message: value,
        type: "success",
      });
    },

  errorMessage(value = "执行错误") {
      this.$notify.error({
        title: "错误",
        message: value,
      });
    },

  FriendlyFileSize(bytes) {
      bytes = parseFloat(bytes);
      if (bytes === 0) return "0B";
      let k = 1024,
        sizes = ["B", "KB", "MB", "GB", "TB"],
        i = Math.floor(Math.log(bytes) / Math.log(k));
      return (bytes / Math.pow(k, i)).toPrecision(3) + sizes[i];
    },
}

编写提交前置函数，这里将做验证和生成cancelToken：

beforeUpload(file) {
      var token = getCancelToken();
      file.cancelToken = token;
      let isLt2M = true;
      if (this.fileSizeLimit < 0) {
        return true;
      }
      isLt2M = file.size / 1024 / 1024 < this.fileSizeLimit;
      if (!isLt2M) {
        this.loading = false;
        this.errorMessage(`"上传文件大小不能超过 ${this.fileSizeLimit}}MB!"`);
      }
      return isLt2M;
}

编写upload函数，用于组装请求数据并交给 ajaxRequire 执行上传任务

  async upload(option) {
      this.loaded = true;
      var model = new CreateFileDto();
      var file = option.file;
      model.fileName = file.name;
      model.fileType = 2;
      model.mimeType = file.type;
      model.ownerUserId = 1;
      model.fileContainerName = "Container1";
      model.file = file;
      var fd = new FormData();

      Enumerable.from(model).forEach((c) => {
        fd.append(c.key, c.value);
      });

      var token = file.cancelToken;
      await request(
        this.uploadUrl,
        "post",
        fd,
        (e) => {
          if (e.total > 0) {
            e.percent = (e.loaded / e.total) * 100;
          }
          option.onProgress(e);
        },
        token
      );
    },

将token将作为取消传输的入口交给ajaxRequire ，自己也保留这个对象用于发送取消命令，相当于“一式两份”。

添加el-upload各阶段函数的订阅

:before-upload=“beforeUpload”
:on-success=“handleSuccess”
:on-remove=“handleRemove”
:on-error=“handleError”

    handleSuccess(response, file, fileList) {
      this.successMessage("上传成功");
      this.loading = false;
    },

    handleError(e, file, fileList) {
      this.errorMessage(e);
      this.loading = false;
    },

    handleRemove(file, fileList) {
      if (file.raw.cancelToken) {
        file.raw.cancelToken.cancel();
      }
    },

编写上传队列的Html代码：

      <el-button ref="uploadButton">上传</el-button>
      <span slot="file" slot-scope="{ file }">
        <div class="filelist-item">
          <el-row>
            <el-col :span="6" class="file-icon-frame">
              <i class="el-icon-document file-icon"></i>
            </el-col>
            <el-col :span="18">
              <el-row>
                <el-col :span="20">
                  <label class="file-title">
                    {{ file.name }}
                  </label>
                </el-col>
                <el-col :span="4" style="text-align: right">
                  <el-button
                    type="danger"
                    icon="el-icon-minus"
                    size="mini"
                    circle
                    @click="handleRemove(file)"
                  ></el-button>
                </el-col>
                <el-col :span="24">
                  <label class="file-size">
                    {{ FriendlyFileSize(file.size) }}
                  </label>
                </el-col>
                <el-col :span="24">
                  <el-progress
                    :text-inside="true"
                    :stroke-width="26"
                    :percentage="parseInt(file.percentage, 10)"
                    :status="
                      parseInt(file.percentage, 10) == 100 ? 'success' : ''
                    "
                  >
                  </el-progress
                ></el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </span>

运行

进入后端项目的目录(api)，运行：

dotnet run

最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 

入后端项目的目录(api)，运行：

dotnet run

最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• [外链图片转存中…(img-Afl7f7v2-1715389452293)]