uniapp h5图片压缩并上传到后台服务器

UniApp是一个基于Vue.js的跨平台框架，它允许开发者构建一次，部署到多个平台的应用，包括H5网页。当需要在H5页面中压缩图片并上传至后台服务器，你可以按照以下步骤操作：

1. **图片压缩**:
- 使用JavaScript库，如`html2canvas`配合`canvas-to-blob`或`sharp`等工具，先将图片转为Base64编码的Data URL，然后通过第三方库如`compressible`或自定义算法对数据进行压缩。

   import compressImage from 'compressible';

   async function compress(imgData) {
     const compressedImg = await compressImage(imgData, { quality: 0.8 });
     return compressedImg.data;
   }

2. **上传到服务器**:
- 创建FormData，将压缩后的图片作为formData的一部分。
- 发起POST请求到后端API，通常使用fetch、axios或者其他HTTP客户端库。

   async function uploadCompressedImage(compressedImgData) {
     const formData = new FormData();
     formData.append('image', compressedImgData, 'compressedImage.jpg');
   
     try {
       const response = await axios.post('/api/upload', formData);
       // 处理服务器返回的数据
       console.log(response.data);
     } catch (error) {
       console.error(error);
     }
   }

3. **整合到页面**:
- 用户选中图片后，触发压缩并上传的函数。

   <input type="file" @change="onFileChange">
   <button @click="uploadCompressedImage">上传</button>

   methods: {
     onFileChange(e) {
       const file = e.target.files[0];
       if (file) {
         // 图片读取转换为blob
         const reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = () => {
           this.uploadCompressedImage(reader.result);
         };
       }
     }
   }