uniapp 上传二进制图片、base64文件

uniapp 上传图片可以用组件 uni.uploadFile（二进制直接调用）

这里把上传封装到公用方法中  uniapp-upload

import config from '@/config'
const url = config.baseUrl + config.baseApi + "/file/uploadFile"

function fileUpload(data) {
	console.log(data)
	return new Promise((resolve, reject) => {
		uni.uploadFile({
			url: url, //上传图片api  （后端上传图片接口）
			filePath: data,
			name: 'file',  // 关键！！！要与后端的字段名一致后端才可以成功获取二进制文件
			method: 'post',
			success: (res) => {
				let group = JSON.parse(res.data)
				uni.showToast({
					title: "上传成功",
					icon: "success"
				})
				resolve(group); // 返回处理后数据
			}
		});
	})
}
export default fileUpload

uniapp 上传图片 base64格式上传 

使用 uni.getFileSystemManager().readFile转换文件  

 data:image/png;base64   很重要  必须加上

function fileUpload(data) {
	console.log(data)
	return new Promise((resolve, reject) => {
		uni.getFileSystemManager().readFile({
			filePath: data, // 要读取的文件路径
			encoding: 'base64', // 编码格式
			success: function(res) {
				const data={
					base64:'data:image/png;base64,'+res.data
				}
                // addFile 是上传文件的接口
				addFile(data).then(res=>{
					console.log(res,'上传图片')
					if(res.statusCode==200){
						let group = res.data
						uni.showToast({
							title: "上传成功",
							icon: "success"
						})
						resolve(group); // 返回处理后数据
						
					}
				}).catch(error=>{
					reject(error)
				})
			}
		})

	})
}

引入方法以及调用方法

 需要与 uni.chooseImage 搭配使用  uniapp-chooseimage

// 	import fileUpload from "@/utils/upload.js"
addPhoto(){
    uni.chooseImage({
		count: 1, //默认9
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album','camera'], // album 从相册选图，camera 使用相机，默认二者都有
		success: (res) => {
			const tempFilePaths = res.tempFilePaths; // 图片路径
			fileUpload(tempFilePaths[0]).then(res => {
                this.taskform[name] = res.data
			})
		}
	});
}

 删除图片

html部分 

			<view class="form-flex">
				<view class="form-title"><text>*</text>货物图片 <text class="upload_holder" v-if="isEdit">请上传货物照片</text>
				</view>
				<image style="width: 16px;height: 16px;" src="@/static/images/task/addphoto.png"
					@click="addPhoto('cargoImg','货物')" v-if="isEdit">
				</image>
			</view>
			<view class="taskimg" v-if="taskform.cargoImg!=''">
				<image :src='delete_img' class="iconfont" @click="closeImg('cargoImg',taskform.cargoImg)" v-if="isEdit">
				</image>
				<image :src="taskform.cargoImg" class="form_img"></image>
			</view>

 delete_img 就是删除图片的icon 

            // 删除图片
			closeImg(name, imgpath) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除当前图片',
					success: function(res) {
						if (res.confirm) {
							const data = {
								path: imgpath,
							}
                            // deleteFile 是后端的删除图片方法
							deleteFile(data).then(res => {
								if (res.data) {
									uni.showToast({
										title: "删除成功",
										icon: "success"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

 css样式

// 上传图片样式
		.taskimg {
			position: relative;
			margin-top: 10px;
			width: 120px;
			height: 80px;

			// 上传图片样式
			.form_img {
				width: 120px;
				height: 80px;
			}

			// 删除图片按钮样式
			.iconfont {
				width: 16px;
				height: 16px;
				color: #eee;
				position: absolute;
				top: -15upx;
				right: -15upx;
				z-index: 1;
				cursor: pointer;
			}
		}