1、安装图片路径转base64js

新建plugin/image-tools/index.js

function getLocalFilePath(path) {
    if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
        return path
    }
    if (path.indexOf('file://') === 0) {
        return path
    }
    if (path.indexOf('/storage/emulated/0/') === 0) {
        return path
    }
    if (path.indexOf('/') === 0) {
        var localFilePath = plus.io.convertAbsoluteFileSystem(path)
        if (localFilePath !== path) {
            return localFilePath
        } else {
            path = path.substr(1)
        }
    }
    return '_www/' + path
}

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'))
    })
}

export function base64ToPath(base64) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            base64 = base64.split(',')
            var type = base64[0].match(/:(.*?);/)[1]
            var str = atob(base64[1])
            var n = str.length
            var array = new Uint8Array(n)
            while (n--) {
                array[n] = str.charCodeAt(n)
            }
            return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
        }
        var extName = base64.match(/data\:\S+\/(\S+);/)
        if (extName) {
            extName = extName[1]
        } else {
            reject(new Error('base64 error'))
        }
        var fileName = Date.now() + '.' + extName
        if (typeof plus === 'object') {
            var bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
            bitmap.loadBase64Data(base64, function() {
                var filePath = '_doc/uniapp_temp/' + fileName
                bitmap.save(filePath, {}, function() {
                    bitmap.clear()
                    resolve(filePath)
                }, function(error) {
                    bitmap.clear()
                    reject(error)
                })
            }, function(error) {
                bitmap.clear()
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            var filePath = wx.env.USER_DATA_PATH + '/' + fileName
            wx.getFileSystemManager().writeFile({
                filePath: filePath,
                data: base64.replace(/^data:\S+\/\S+;base64,/, ''),
                encoding: 'base64',
                success: function() {
                    resolve(filePath)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}

2、新建util.js

 import {
 	pathToBase64
 } from '@/plugin/image-tools/index.js'
 
  export default {
	  
	  /*
	   * 单图上传base64
	   * @param object opt
	   * @param callable successCallback 成功执行方法 data 
	   * @param callable errorCallback 失败执行方法 
	   */
	  imageOneBase64: function(opt, successCallback, errorCallback) {
	  	let that = this;
	  	if (typeof opt === 'string') {
	  		opt = {};
	  	}
	  	let count = opt.count || 1,
	  		sizeType = opt.sizeType || ['compressed'],
	  		sourceType = opt.sourceType || ['album', 'camera'],
	  		is_load = opt.is_load || true,
	  		inputName = opt.name || 'pics',
	  		fileType = opt.fileType || 'image';
	  	uni.chooseImage({
	  		count: count, //最多可以选择的图片总数  
	  		sizeType: sizeType, // 可以指定是原图还是压缩图，默认二者都有  
	  		sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有  
	  		success: function(res) {
	  			//启动上传等待中...  
	  			uni.showLoading({
	  				title: '图片上传中',
	  			});
	  			pathToBase64(res.tempFilePaths[0])
	  				.then(imgBase64 => {
	  					let newData = {
	  						tempFilePath: res.tempFilePaths[0],
	  						imgBase64: imgBase64,
	  					}
	  					uni.hideLoading();
	  					successCallback && successCallback(newData)
	  				})
	  				.catch(error => {
	  					errorCallback && errorCallback(error);
						uni.$showMsg(error.msg)
	  				})
	  		},
	  		fail: function(res) {
	  			uni.hideLoading();
	  		}
	  	})
	  },
	  /*
	   * 单图上传
	   * @param object opt
	   * @param callable successCallback 成功执行方法 data 
	   * @param callable errorCallback 失败执行方法 
	   */
	  uploadImageOne: function(opt, successCallback, errorCallback) {
	  	let that = this;
	  	if (typeof opt === 'string') {
	  		let url = opt;
	  		opt = {};
	  		opt.url = url;
	  	}
	  	let count = opt.count || 1,
	  		sizeType = opt.sizeType || ['compressed'],
	  		sourceType = opt.sourceType || ['album', 'camera'],
	  		is_load = opt.is_load || true,
	  		uploadUrl = opt.url || '',
	  		inputName = opt.name || 'pics',
	  		fileType = opt.fileType || 'image';
	  	uni.chooseImage({
	  		count: count, //最多可以选择的图片总数  
	  		sizeType: sizeType, // 可以指定是原图还是压缩图，默认二者都有  
	  		sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有  
	  		success: function(res) {
	  			//启动上传等待中...  
	  			uni.showLoading({
	  				title: '图片上传中',
	  			});
	  			uni.uploadFile({
	  				url: HTTP_REQUEST_URL + '/api/' + uploadUrl,
	  				filePath: res.tempFilePaths[0],
	  				fileType: fileType,
	  				name: inputName,
	  				formData: {
	  					'filename': inputName
	  				},
	  				header: {
	  					// #ifdef MP
	  					"Content-Type": "multipart/form-data",
	  					// #endif
	  					[TOKENNAME]: 'Bearer ' + store.state.app.token
	  				},
	  				success: function(res) {
	  					uni.hideLoading();
	  					if (res.statusCode == 403) {
	  						
							uni.$showMsg(res.data)
	  					} else {
	  						let data = res.data ? JSON.parse(res.data) : {};
	  						if (data.status == 200) {
	  							successCallback && successCallback(data)
	  						} else {
	  							errorCallback && errorCallback(data);
	  							
								uni.$showMsg(error.msg)
	  						}
	  					}
	  				},
	  				fail: function(res) {
	  					uni.hideLoading();
						uni.$showMsg('上传图片失败')
	  				}
	  			})
	  		
	  		}
	  	})
	  }
  }
  
  

3、

import util from './utils/util.js'

Vue.prototype.$util = util

4、图片子组件---点击上传图片

<template>
	<view>
		<!-- 循环图片 -->
		<view v-for="(item, index) in imgList" :key="index" :style="{width:width + 'rpx', height:height + 'rpx'}">
			<image class="img" :src="item"></image>
		</view>
		
		<!-- 添加图片的图标 -->
		<view class="share-img-box" :style="{width:width + 'rpx', height:height + 'rpx'}" v-if="imgList.length < maxCount">
			<image src="../../static/button/addimg.png" mode="" @click="addImg"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "addImg",
		data() {
			return {
				// 图片数组
				imgList: [],
				// base64图片数组
				imgBase64List: [],
				indexNum: 0
			};
		},

		props: {
			width: {
				type: Number,
				default: 100
			},
			height: {
				type: Number,
				default: 100
			},
			maxCount:{
				type:Number,
				default:1
			}
		},
		methods: {
			addImg() {
				let _this = this
				let opt = {
					count: this.maxCount,
					sizeType: this.sizeType,
					sourceType: this.sourceType
				}
				// 从本地相册选择图片或使用相机拍照
				this.$util.imageOneBase64(opt, function(res) {
					_this.imgList.unshift(res.tempFilePath);
					// console.log(res)
					console.log(_this.imgList);
					_this.imgBase64List.unshift(res.imgBase64);
					let arr = {
						key: _this.indexNum,
						imgBase64: _this.imgBase64List
					}
					_this.$emit('imgListChange', arr)
				});
			},
		}
	}
</script>

<style lang="scss">
	.share-img-box {
		
		background: #f7f7f7;
		border-radius: 3px;
		display: flex;
		justify-content: center;
		align-items: center;

	}
	
	.img{
		width: 100%;
		height: 100%;
	}
</style>

5、父组件

<view class="select-vote" v-for="(item,index) in optionsList" :key="index">
					<view>
						<addImg width="100" height="100" @imgListChange="imgListChange" :indexNum="index"></addImg>
						<input class="input-box" type="text" v-model="item.name" :placeholder="'请输入活动标题' + (index +1) "  />
					</view>
					<image class="icon" src="../../static/button/clear.png"></image>
				</view>




// 投票选项
				optionsList:[
					{
						name:'',
						image:''
					}
				],

imgListChange(e){
				console.log(e)
				this.optionsList[e.key].image = e.imgBase64
			},