uniapp h5端上传图片压缩转Blob上传

1. 图片压缩使用 uniapp 插件市场上的压缩插件，地址：https://ext.dcloud.net.cn/plugin?id=1718

2. 新建一个js文件，写 toBlob的方法

const base64ToBlob=({b64data = '', contentType = '', sliceSize = 512} = {})=>{

    return new Promise((resolve, reject) => {

      // 使用 atob() 方法将数据解码

      let byteCharacters = atob(b64data);

      let byteArrays = [];

      for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {

        let slice = byteCharacters.slice(offset, offset + sliceSize);

        let byteNumbers = [];

        for (let i = 0; i < slice.length; i++) {

            byteNumbers.push(slice.charCodeAt(i));

        }

        byteArrays.push(new Uint8Array(byteNumbers));

      }

      let result = new Blob(byteArrays, {

        type: contentType

      })

      result = Object.assign(result,{

        // jartto: 这里一定要处理一下 URL.createObjectURL

        preview: URL.createObjectURL(result),

        name: `图片示例.png`

      });

      resolve(result)

    })

  }

 

module.exports = {

    base64ToBlob:base64ToBlob,

}

html 拍照按钮

<view class="nextBtn"

        @click="nextFn"

         >

         开始拍照

</view>

3.引入下载好的插件 和js 文件

import WCompress from '@/common/components/w-compress/w-compress.vue'

import toBlob from '@/common/js/toBlob .js';

4.选择图片 =》压缩图片 =》因为压缩返回的是base64，base64转blob后使用uniapp  的uploadFile api上传

nextFn(){

                uni.chooseImage({

                    count: 1, //默认9

                    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有

                    sourceType: ['camera'], 

                    success: (res) =>{

                        uni.showLoading({

                            title: '图片压缩中...'

                        });

                        this.$refs.wCompress.start(res.tempFilePaths[0], {

                            pixels: 300000,  // 最大分辨率，默认二百万

                            quality: 0.9,     // 压缩质量，默认0.8

                            type: 'png',      // 图片类型，默认jpg

                            base64: true,     // 是否返回base64，默认false，非H5有效

                        })

                        .then(res => {

                            uni.hideLoading()

                            let base64 = res.split(',')[1]

                            toBlob.base64ToBlob({b64data: base64, contentType: 'image/png'}).then(res => {

                                // 转后后的blob对象

                                console.log('blob', res.preview)

                               this.faceOnly(res.preview)

                            })

                            

                            // 

                        })

                        .catch(e => {

                            console.log(e)

                            uni.hideLoading()

                        })

                    }

                });

            },