手机拍照后上传图片到服务器怎么使用？演示

一、简介

最近有需要用手机拍照并上传到服务器。大家应该知道，现在的手机像素确实太高了。随机一张照片就会超过10M。直接上传到服务器很浪费存储空间。另一方面就是浪费流量，如果网络不好的话会很慢。所以我想找到一个压缩图像的前端解决方案。

Vue前端压缩图片后上传，拍照上传最佳实践

在网上找了很多方法但是效果都不好。要么功能根本无法实现，要么兼容性不好。但我终于找到了一个更完美的插件。点击直接进入首页：废话不多说，先介绍一下如何使用。

本文基于Vue、NPM进行演示。

2、使用镜像压缩2.1安装依赖包

通过以下命令将库添加到我们自己的项目中

npm install shrinkpng

2.2 导入包

在需要的vue文件中添加以下代码

import { shrinkImage } from "shrinkpng"

2.3 开始编码

里面使用了van-组件，:-read=""是核心语句，方法中对图像进行了压缩。


 <van-uploader :after-read="onRead" :before-delete="beforeDelete" v-model="preImg" :before-read="beforeRead"/>
</van-cell>

该方法的实现如下，其中file是一个文件对象，通过该方法可以对该文件进行压缩。

compressImg(file) {
 return shrinkImage(file, {
   quality: 15
 });
},
beforeRead(file) {
  return this.compressImg(file);
},

它是压缩质量，在1-100之间。根据我自己的项目情况，配置为15基本可以满足我的要求。基本上将10M+的图片压缩到1M以下。

3.网上其他推荐的压缩图片插件3.1 vue-image-

特点：支持图像压缩、裁剪、旋转等功能，并提供丰富的配置选项。

3.2 vue-

功能特点：支持文件上传和图片处理，可以对图片进行压缩、调整大小、裁剪等操作。提供丰富的配置选项和事件监控。

总结

以上就是我今天要讲的内容。本文介绍Vue前端压缩图片然后上传，以及拍照上传的最佳实践。很多时候，走了很多弯路还是不行，但探索的过程还是很美好的。希望本文的使用可以提供给有需要的朋友。

原文首发于微信公众号（编程俱乐部）：Vue前端压缩图片然后上传，以及拍照上传的最佳实践