一、上传图片压缩再转base64码

1、选择图片 官方api

<view class="image-item" v-for="(item,index) in files" :key="index"></view>
<view class="upload-button image-item" @click="handClickChooseImage" 
	<image src="/static/ApplicationPage/DataCollection/add.png"></image>
</view>


//插件方法导入 插件的实际引入第2点有讲
import {pathToBase64,  //图片路径转base64
		base64ToPath,  //base64码转图片
	} from '@/common/image-tools/index.js'

//方法	
methods:
	handClickChooseImage(){
		let that = this;
		uni.chooseImage({
			count: (4 - that.files.length), //默认9
			//官方的压缩为50%,图片太大的话，压缩效果不好
			sizeType: ['compressed'], //original 原图，compressed 压缩图
			sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有
			success: (res) => {
				let imageList = res.tempFilePaths.toString().split(',');
				for (let i = 0; i < imageList.length; i++) {
					//调用自己的方法
					that.handControllGetBase64(imageList[i], base => {							
						that.files.push(base);		
					});
				}
			}
		});
	},
	handControllGetBase64(file, callback) {
		//h5不可用
		uni.saveFile({
			tempFilePath: file,
			success: (saveFile) => {
			//pathToBase64为uniapp 插件市场的插件内方法
				pathToBase64(saveFile.savedFilePath).then(base64 => {
					//用完就删
					uni.removeSavedFile({
						filePath: saveFile.savedFilePath
					});
					//返回
					callback(base64);
				})
			}
		});
	},

2、引用uniapp插件市场图片转base64插件 插件地址 ，下载插件并导入，如下图。

index.js文件中 pathToBase64 方法如下

export function pathToBase64(path) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            if (typeof FileReader === 'function') {
                var xhr = new XMLHttpRequest()
                xhr.open('GET', path, true)
                xhr.responseType = 'blob'
                xhr.onload = function() {
                    if (this.status === 200) {
                        let fileReader = new FileReader()
                        fileReader.onload = function(e) {
                            resolve(e.target.result)
                        }
                        fileReader.onerror = reject
                        fileReader.readAsDataURL(this.response)
                    }
                }
                xhr.onerror = reject
                xhr.send()
                return
            }
            var canvas = document.createElement('canvas')
            var c2x = canvas.getContext('2d')
            var img = new Image
            img.onload = function() {
                canvas.width = img.width
                canvas.height = img.height
                c2x.drawImage(img, 0, 0)
                resolve(canvas.toDataURL())
                canvas.height = canvas.width = 0
            }
            img.onerror = reject
            img.src = path
            return
        }
        if (typeof plus === 'object') { //小白看向这里，此处为手机端图片处理真实区域。
            plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
                entry.file(function(file) {
                    var fileReader = new plus.io.FileReader()
                    fileReader.onload = function(data) {
                        resolve(data.target.result)
                    }
                    fileReader.onerror = function(error) {
                        reject(error)
                    }
                    fileReader.readAsDataURL(file)
                }, function(error) {
                    reject(error)
                })
            }, function(error) {
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            wx.getFileSystemManager().readFile({
                filePath: path,
                encoding: 'base64',
                success: function(res) {
                    resolve('data:image/png;base64,' + res.data)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}

3、处理代码，此插件内的方法只对图片转base64 却并未压缩，所以需对代码进行改造。

插件原来的代码：
if (typeof plus === 'object') { //小白看向这里，此处为手机端图片处理真实区域。
	plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
    	entry.file(function(file) {
        	var fileReader = new plus.io.FileReader()
            fileReader.onload = function(data) {
                resolve(data.target.result)
            }
            fileReader.onerror = function(error) {
                reject(error)
            }
            fileReader.readAsDataURL(file)
           	}, function(error) {
               reject(error)
            })
       	}, function(error) {
                reject(error)
   })
     return
}
改造一下：
if (typeof plus === 'object') {
	//官方压缩
	plus.zip.compressImage({
	//plus.zip.compressImg 官方Api地址 (http://www.html5plus.org/doc/zh_cn/zip.html)
		src:path,     		//你要压缩的图片路径
		dst:'_doc/a'+path, //你要生成的图片路径，路径不能与src相同，不然app端会报错
		quality:20         //图片质量[10-100]
	},function(e) {
		//压缩成功后再转base64
		plus.io.resolveLocalFileSystemURL(e.target, function(entry) {
			entry.file(function(file) {
				var fileReader = new plus.io.FileReader()
				fileReader.onload = function(data) {
					resolve(data.target.result)
				}
				fileReader.onerror = function(error) {
					reject(error)
				}
				fileReader.readAsDataURL(file)
			}, function(error) {
				 reject(error)
			})
		}, function(error) {
			reject(error)
		})
	},function(error) {
		console.log(error)		
	});
return
}

二、base64转图片路径

1、插件为上面所说的插件，引入

import {
	base64ToPath,  //base64码转图片
	} from '@/common/image-tools/index.js'

2、调用方法，base64ToPath为插件内方法。

files.forEach(item => {
	//item为base64码
	base64ToPath(item).then(res => {
		//res为图片路径
		this.previewFiles.push(res)
	})
})

到这里就结束了，感谢您的阅读！