2024年最全vue + element + vue-cropper 实现图片裁剪上传，Flutter最新开源框架

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

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

JavaScript

性能

linux

安装 vue-cropper

npm install vue-cropper

使用

main.js里面

import VueCropper from ‘vue-cropper’

Vue.use(VueCropper)

关于HTML部分的代码

上传组件不能自动上传，并且要设置一个 on-change 方法。

:auto-upload=“false” :on-change=“changeUpload”

<el-upload ref=“pic” list-type=“picture-card” action=“” :auto-upload=“false” :on-change=“changeUpload”

:on-success=“handleAvatarSuccess” :show-file-list=“false”>

请上传长宽为1270*622尺寸并且格式为.jpg或.png的图片文件

<vueCropper ref=“cropper” :img=“option.img” :outputSize=“option.size” :outputType=“option.outputType”

:info=“true” :full=“option.full” :canMove=“option.canMove” :canMoveBox=“option.canMoveBox”

:original=“option.original” :autoCrop=“option.autoCrop” :fixed=“option.fixed”

:fixedNumber=“option.fixedNumber” :centerBox=“option.centerBox” :infoTrue=“option.infoTrue”

:fixedBox=“option.fixedBox”>

<el-button @click=“dialogVisible = false”>取 消

<el-button type=“primary” @click=“finish” :loading=“loading”>确认

关于js代码

data() {

return {

dialogVisible: false,

option: {

img: ‘’, // 裁剪图片的地址

info: true, // 裁剪框的大小信息

outputSize: 1, // 裁剪生成图片的质量

outputType: ‘jpeg’, // 裁剪生成图片的格式

canScale: false, // 图片是否允许滚轮缩放

autoCrop: true, // 是否默认生成截图框

// autoCropWidth: 300, // 默认生成截图框宽度

// autoCropHeight: 200, // 默认生成截图框高度

fixedBox: false, // 固定截图框大小 不允许改变

fixed: true, // 是否开启截图框宽高固定比例

fixedNumber: [1270, 622], // 截图框的宽高比例

full: true, // 是否输出原图比例的截图

canMoveBox: true, // 截图框能否拖动

original: false, // 上传图片按照原始比例渲染

centerBox: false, // 截图框是否被限制在图片里面

infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高

},

}

},

// 上传按钮 限制图片大小

changeUpload(file, fileList) {

let testmsg = file.name.substring(file.name.lastIndexOf(‘.’) + 1)

const isJPG = testmsg === ‘jpg’

const isPNG = testmsg === ‘png’

const isLt2M = file.size / 1024 / 1024 < 2;

if (!isJPG && !isPNG) {

this.$message.error(‘上传头像图片只能是 JPG 或 PNG 格式!’);

return

}

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

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

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

[外链图片转存中…(img-ac7SXaym-1715041846829)]