2024年前端最新[Vue] 写一个简单的文件上传控件，学生党必看

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

});

},

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(© => {

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代码：

上传

{{ file.name }}

<el-button

type=“danger”

icon=“el-icon-minus”

size=“mini”

circle

@click=“handleRemove(file)”

{{ FriendlyFileSize(file.size) }}

<el-progress

:text-inside=“true”

:stroke-width=“26”

:percentage=“parseInt(file.percentage, 10)”

:status="

parseInt(file.percentage, 10) == 100 ? ‘success’ : ‘’

"

</el-progress

运行

–

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

dotnet run

前端项目目录(web)，运行

yarn serve

运行效果：

完整代码：

file-uploader-sample/web at master · jevonsflash/file-uploader-sample (github.com)")

项目地址：jevonsflash/file-uploader-sample (github.com)")

标签: Vue, ElementUI

先分享一款实用前端面试题库小程序  手机刷题收藏以后用的上     微信搜索     MST题宝库

==================================================

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总