2024年Web前端最新Ant Design Vue结合vue-cropper打造图片裁剪上传组件，【大牛系列教学】

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

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

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。

default: 2,

},

//图片存储在oss上的上级目录名

imgType: {

type: String,

default: ‘’,

},

// 图片地址

imageUrl: {

type: String,

default: ‘’,

},

},

data() {

return {

loading: false,

isStopRun: false,

}

},

methods: {

//从本地选择文件

handleChange(info) {

if (this.isStopRun) {

return

}

this.loading = true

const { options } = this

this.getBase64(info.file.originFileObj, (imageUrl) => {

const target = Object.assign({}, options, {

img: imageUrl,

})

this.$refs.CropperModal.edit(target)

})

},

// 上传之前 格式与大小校验

beforeUpload(file) {

this.isStopRun = false

var fileType = file.type

if (fileType.indexOf(‘image’) < 0) {

this.$message.warning(‘请上传图片’)

this.isStopRun = true

return false

}

const isJpgOrPng = file.type === ‘image/jpeg’ || file.type === ‘image/png’ || file.type === ‘image/jpg’

if (!isJpgOrPng) {

this.$message.error(‘你上传图片格式不正确!’)

this.isStopRun = true

}

const isLtSize = file.size < this.imgSize * 1024 * 1024

if (!isLtSize) {

this.$message.error(‘图片大小不能超过’ + this.imgSize + ‘MB!’)

this.isStopRun = true

}

return isJpgOrPng && isLtSize

},

//获取服务器返回的地址

handleCropperSuccess(data) {

//将返回的数据回显

this.loading = false

this.$emit(‘crop-upload-success’, data)

},

// 取消上传

handleCropperClose() {

this.loading = false

this.$emit(‘crop-upload-close’)

},

getBase64(img, callback) {

const reader = new FileReader()

reader.addEventListener(‘load’, () => callback(reader.result))

reader.readAsDataURL(img)

},

},

}

• 模态框 CropperModal.vue

<a-modal

:visible=“visible”

:title=“options.title”

:maskClosable=“false”

:confirmLoading=“confirmLoading”

:width=“800”

@cancel=“cancelHandel”

<vue-cropper

ref=“cropper”

:img=“options.img”

:info=“true”

:autoCrop=“options.autoCrop”

:autoCropWidth=“options.autoCropWidth”

:autoCropHeight=“options.autoCropHeight”

:fixedBox=“options.fixedBox”

@realTime=“realTime”

<a-button key=“back” @click=“cancelHandel”>取消

<a-button key=“submit” type=“primary” :loading=“confirmLoading” @click=“okHandel”>保存

• ajax网络接口 index.js

import request from ‘@/utils/request’

import qs from ‘qs’

const Api = {

UpPic: ‘/UpPic’,

}

/**

• 上传图片

总结

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

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

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

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。