2024年最全Vue进阶（四十八）：Vue，阿里+头条+抖音+百度+蚂蚁+京东面经-CSDN博客

本文链接：https://blog.csdn.net/2401_84619565/article/details/138520151

总结

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

		</li>
		<li class="list-li-add">
			<span class="add-img" @click.stop="addPic"></span>
		</li>
	</ul>
</div>
<div class="add-preview" v-show="isPreview" @click="closePreview">
	<img :src="previewImg">
</div>


### 三、实现步骤


#### 3.1 点击拍照或选择图片 addPic


在`vue.js`中出发拍照和选择图片是频繁操作行为，每次只能拍照或选择一张图片，可以拍多张上传，使用给`click`事件加上`.stop`的修饰符，`.stop` - 调用 `event.stopPropagation()` ，是为了停止冒泡。`accept`是为了规定通过文件上传来提交的文件的类型，`capture`是`webApp`中捕获到系统默认的设备，`camera`–照相机；`camcorder`–摄像机；`microphone`–录音。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190422191830102.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9zaHE1Nzg1LmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70)  
 在触发拍照行为的时候绑定`change`事件 `onFileChange` 获取file文件对象，然后调用`lrz`方法压缩图片，在`imgUrls`数组中添加基于base64格式的图片。

lrz(file[0], { width: 480 }).then(function(rst) {
vm.imgUrls.push(rst.base64);
return rst;
}).always(function() {
// 清空文件上传控件的值
e.target.value = null;
});


* `lrz`(file, [options]);
* `file`： 通过 `input:file` 得到的文件，或者直接传入图片路径。
* [`options`] ：这个参数允许忽略。
* `width` {`Number`} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度；
* `height` {`Number`} 同上；
* `quality` {`Number`} 图片压缩质量，取值 0 - 1，默认为0.7；
* `fieldName` {`String`} 后端接收的字段名，默认：file；


返回结果是一个`promise`对象，有`then()、catch()、always`三个方法。


`then(rst)`结果信息如下：


`rst.formData` 后端可处理的数据；


* `rst.file` 压缩后的`file`对象（默认已经丢在rst.formData有一份了），需要注意的是如果压缩率太低的话，这个会是原始的file对象；
* `rst.fileLen` 生成后的图片的大小，后端可以通过此值来校验是否传输完整；
* `rst.base64` 生成后的图片`base64`，后端可以处理此字符串为图片，也直接用于`img.src = base64`；
* `rst.base64Len` 生成后的`base64`大小，后端可以通过此值来校验是否传输完整 (如果采用`base64`上传方式)；
* `rst.origin` 也就是原始的`file`对象，里面存了一些原始文件的信息，例如大小，日期等；


注意：由于我们可能持续点击拍照上传图片，使用在`alway`回调函数里面必须清空上传控制的值。

// 清空文件上传控件的值
e.target.value = null;


#### 3.2 拍照预览


默认 `isPhoto` 为`true`,隐藏继续拍照的`DOM`显示，`toggleAddPic` 监听当前选中`imgUrls`数组长度，转换 `isPhoto` 的布尔值若有一张及以上的图片设置 `isPhoto` 为`false`, 则隐藏点击拍第一张照片`DOM`，显示继续拍照的`DOM`；若没有图片，则隐藏继续拍照的`DOM`，显示击拍第一张照片`DOM`。


#### 3.3 删除


根据数组对应的下标，在`imgUrls`中删除对应的图片数据。

delImage: function(index) {
let vm = this;
let btnArray = [‘取消’, ‘确定’];
mui.confirm(‘确定删除该图片?’,‘提示’, btnArray, function(e) {
if (e.index == 1) {
vm.imgUrls.splice(index, 1);
}
})
}


![在这里插入图片描述](https://img-blog.csdnimg.cn/20190422192001490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9zaHE1Nzg1LmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70)


#### 3.4 大图预览


在这里大图预览就是将`base64`格式的图片直接放进预览`DOM`的`img src`中放大展示，点击图片自身关闭预览，清空`img src`资源。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190422192042856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9zaHE1Nzg1LmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70)


### 最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~



祝大家都能收获大厂offer~

> **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)



![](https://img-blog.csdnimg.cn/img_convert/b871b45fb2e6d5442144c863cbcff965.png)

![](https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png)