uniapp 使用 vue-cropper-h5

在移动端需要体验感更好一些的头像截取上传

首先拉包

npm install vue-cropper-h5 / yarn add vue-cropper-h5

引入项目，可选择全局引入或者局部引入，我这块为局部引入

import H5Cropper from 'vue-cropper-h5'

export default {
  name: 'App',
  components: { H5Cropper }
};

组件本身有三个事件：

| getbase64 | 获取裁剪完成的 Base64 数据 |
| getblob | 获取裁剪完成的 Blob 数据 |
| get-file | 获取裁剪完成的 File 数据 |

之后采用uni.uploadFile 上传文件

getFile(file){
	// console.log('file',file);
	let formData = new FormData()
	formData.append('avatarFile',file)
	let data = { name: 'avatarFile',formData: formData}
	uni.uploadFile({
		url: '后台接口路径',
		name: 'avatarFile',
		files: [{name: 'avatarFile',file: file,filePath: ''}],
		formData: data,
		header:{
			'Authorization': 'Bearer ' + getAccessToken(),
			'tenant-id': '1'
		},
		method: 'PUT',
		success(res) {
			console.log(JSON.parse(res.data));
			store.commit('SET_AVATAR', JSON.parse(res.data).data)
			this.imgUrl = JSON.parse(res.data).data
			// this.$forceUpdate();
			uni.showToast({ title: "修改成功", icon: 'success' })
			uni.navigateBack()
		},
		fail(error) {
			console.log(error);
		}
	})
},

vue-cropper-h5 文档地址，完整代码如下

<template>
	<view class="container">
		<u--image width="100%" height="560rpx" :src="imgUrl" @click="previewImg" mode="widthFix"></u--image>
		<h5-cropper @getFile="getFile" @getblob='getBlob' :canMoveBox="true" :fixed="false"  ref="cropper"></h5-cropper>
		<view class="avatarBtn">
			<u-button type="primary" :plain="true" @click="upLoad" text="选择头像"></u-button>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import { getAccessToken } from '@/utils/auth'
	import store from "@/store"
	import H5Cropper from 'vue-cropper-h5'

	export default {
		components: {
			H5Cropper
		},
		data() {
			return {
				imgUrl: ''
			}
		},
		onLoad(opt) {
			this.imgUrl = opt.avatar
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		methods: {
			upLoad() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.imgUrl = res.tempFilePaths[0]
						this.$forceUpdate();
						this.$refs.cropper.loadFile(res.tempFiles[0])
					}
				})
			},
			previewImg(){
				uni.previewImage({
					urls: [this.imgUrl],
				})
			},
			getFile(file){
				// console.log('file',file);
				let formData = new FormData()
				formData.append('avatarFile',file)
				let data = { name: 'avatarFile',formData: formData}
				uni.uploadFile({
					url: '后台接口路径',
					name: 'avatarFile',
					files: [{name: 'avatarFile',file: file,filePath: ''}],
					formData: data,
					header:{
						'Authorization': 'Bearer ' + getAccessToken(),
						'tenant-id': '1'
					},
					method: 'PUT',
					success(res) {
						console.log(JSON.parse(res.data));
						store.commit('SET_AVATAR', JSON.parse(res.data).data)
						this.imgUrl = JSON.parse(res.data).data
						// this.$forceUpdate();
						uni.showToast({ title: "修改成功", icon: 'success' })
						uni.navigateBack()
					},
					fail(error) {
						console.log(error);
					}
				})
			},
			getbase64Data(data){
				// console.log(data);
			},
			getBlob(blob){
				// const fileSystem = uni.getFileSystemManager()
				// const filePath = `${uni.env.USER_DATA_PATH}/temp_file.png`
				// let formData = new FormData()
				// formData.append('avatarFile',blob)
				// let data = { name: 'avatarFile',formData: formData}
			}
		}
	}
</script>

<style>
.avatarBtn {
	padding: 0 20rpx;
}
</style>

uniapp 使用 vue-cropper-h5

悦读