最后前端到底应该怎么学才好?
如果你打算靠自己摸索自学,那么你首先要了解学习前端的基本大纲,这是你将要学习的主要内容,理解以及掌握好这些内容,便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程,作为初学者最好的方式就是看视频教程学习,初学者容易理解接受。
不要选择买书学习,这样的方式没有几个人能学会,基本都是看不下去书,也看不懂书。如果喜欢看书的学弟,可以买一些经典的书籍作为辅助即可,主要还是以看教程为主。每天抽出固定几个小时学习,做好长期学习的准备。学习编程并不是每天光看视频,你学习编程最重要的目的是为了编写软件产品,提供给大众使用,所以用手写出代码实现功能才是我们要做的事情。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
html
<div class="operate-btn-bar">
<div class="btn choice">
选择文件
<input
@change="choiceFileHandle"
ref=""
:value="choiceInputValue"
class="upload-input"
type="file"
multiple/>
</div>
<div
v-show="filesList.length !== 0"
class="btn upload"
@click="allUploadHandle"
v-throttle
>
全部上传
</div>
<!--
- ...
- ...
- ...
-->
<div class="next-bar">
<el-tooltip
class="box-item"
effect="dark"
:content="nextBtnTips"
placement="top-start"
:disabled="!nextBtnDisabled"
>
<div class="next-btn" :class="{'disabled':nextBtnDisabled}" @click="goNextHanlde" v-throttle>
<span>下一步</span>
<el-icon><ArrowRight /></el-icon>
</div>
</el-tooltip>
</div>
一、下载spark-md5
npm install spark-md5
npm install @types/spark-md5 -D
二、引入spark-md5
import SparkMD5 from 'spark-md5'
三、获取hash值
// 文件获取hash值
const getFileMD5 = (file:File) => {
return new Promise((resolve, reject) => {
const spark = new SparkMD5.ArrayBuffer()
const fileReader = new FileReader()
fileReader.onload = (e: ProgressEvent<FileReader>):void => {
spark.append(e.target?.result)
resolve(spark.end())
}
fileReader.onerror = () => {
reject('')
}
fileReader.readAsArrayBuffer(file)
})
}
四、定义类型
interface NewFileType extends File {
speep: number // 分片上传进度
progress: number // ui显示的进度值
fileId: string
// 整个文件上传的状态
state: {
state_txt: string;
tips_txt: string
}
// 文件hash
hash?: string
// 是否合并过
isMerge?: boolean
}
// 分片文件列表
interface FileSliceListType {
file: Blob
hash: string
chunkIndex: number
chunkCount: string
fileName: string
}
五、储存的变量
// 已上传文件列表
const filesList = ref<NewFileType[]>([])
// 切片默认大小
let chunkSize = 1024 \* 1024 \* 5
// 上传文件切片列表
const filesSliceList = ref<FileSliceListType[]>([])
六、选择文件
// 选择文件
const choiceFileHandle = (e:Event) => {
if (uploadLoading.value) return
if (!e.target) return
choiceInputValue.value = null
const files = Array.prototype.slice.call((e as HTMLInputEvent).target.files)
const newFileList = [...filesList.value, ...files]
// 记得再次添加去重
// removeDuplicateObj是业务逻辑的去重
filesList.value = removeDuplicateObj(newFileList)
}
七、文件分片及查询已上传的分片
// 查询已上传的切片
const queryUploadFileHandle = async(file:NewFileType, hash:string) => {
let isRepeat = false
await queryUploadFlilePost({ hash }).then((res) => {
if (res.code !== 200) {
ElMessage.error(res.msg)
return
}
const resultList = res?.data?.resultList
// 当前文件大小
const fileSize = file.size
// 当前文件分割多少份 (chunkSize 多少大小分割)
let chunkCount = Math.ceil(fileSize / chunkSize)
if (fileSize > chunkSize \* 40) {
chunkSize = chunkSize \* 8
chunkCount = Math.ceil(fileSize / chunkSize)
}
for (let i = 0; i < chunkCount; i++) {
// 当前 分割 开始点
const startPoint = i \* chunkSize
// 当前分割 结束点
const endPoint = Math.min(startPoint + chunkSize, fileSize)
const chunk = file.slice(startPoint, endPoint)
// 存储分片状态
filesSliceList.value.push({
file: chunk,
chunkCount: chunkCount.toString(),
fileName: file.name,
hash,
chunkIndex: i
})
}
if (resultList && resultList.length !== 0) {
// 切片数组排除已上传的切片
for (let i = 0; i < filesSliceList.value.length; i++) {
const item:FileSliceListType = filesSliceList.value[i]
if (item.hash === hash && resultList.includes(String(item.chunkIndex))) {
filesSliceList.value.splice(i, 1)
i--
}
}
if (filesSliceList.value.length === 0) {
isRepeat = true
}
}
})
return isRepeat
}
八、所有文件分片同时上传
const promiseArr: unknown[] = []
// 全部上传
const allUploadHandle = async() => {
for (const file of filesList.value) {
if (file.hash) continue
const hash = await getFileMD5(file) as string
file.state = {
state_txt: 'load',
tips_txt: '处理中,请稍后'
}
file.hash = hash
file.progress = 0
file.speep = 0
// 文件切片处理及跳过已上传分片
const curFileIsRepeat = await queryUploadFileHandle(file, hash)
if (curFileIsRepeat) {
file.state = {
state_txt: 'success',
tips_txt: '上传成功!'
}
file.progress = 100
continue
}
### 最后前端到底应该怎么学才好?
如果你打算靠自己摸索自学,那么你首先要了解学习前端的基本大纲,这是你将要学习的主要内容,理解以及掌握好这些内容,便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程,作为初学者最好的方式就是看视频教程学习,初学者容易理解接受。
不要选择买书学习,这样的方式没有几个人能学会,基本都是看不下去书,也看不懂书。如果喜欢看书的学弟,可以买一些经典的书籍作为辅助即可,主要还是以看教程为主。每天抽出固定几个小时学习,做好长期学习的准备。学习编程并不是每天光看视频,你学习编程最重要的目的是为了编写软件产品,提供给大众使用,所以用手写出代码实现功能才是我们要做的事情。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![在这里插入图片描述](https://img-blog.csdnimg.cn/87c2dbe3aa9546dab0e3e5c674753150.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/a3cbdf94b9be48529119539cde243f97.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/0f2364db34af4d57b77547b5f312230a.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/187f1f54cfd94cf7b88a363ffa363f10.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)