cropperjs处理图片预览裁切功能

图片预览裁切有两种方法，结合服务器的图片上传预览或者纯客户端实现上传图片预览。
纯客户端实现上传图片预览 ：
定义一个input标签 type设置为file 设置自带的属性hidden
<input type="file" hidden ref="file" @change="onFileChange" />
对选择器表单进行隐藏,点击头像触发input表单的点击事件@click="$refs.file.click()"
在change事件中获取文文件对象
const file = fileInput.files[0]
设置图片的 src
this.img = window.URL.createObjectURL(file)
file-input 如果选择了同一个文件不会触发change事件
解决方法就是每次使用完毕 把他的value清空
this.$refs.file.value = ''

引用第三方库cropperjs处理图片裁切

npm install cropperjs

import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

因为要操作DOM,所以要在组件初始化之后再调用

mounted() {
		const image = this.$refs.img
		this.cropper = new Cropper(image, {
			viewMode: 1,
			dragMode: 'move',
			aspectRatio: 1,
			autoCropArea: 1,
			cropBoxMovable: false,
			cropBoxResizable: false,
			background: false
		})
	}

项目要求默认配置

			viewMode: 1,
			dragMode: 'move',
			aspectRatio: 1,
			autoCropArea: 1,
			cropBoxMovable: false,
			cropBoxResizable: false,
			background: false

如果是基于服务端的裁切，则使用：getData 方法，该方法得到裁切的区域参数然后传给服务端。

this.cropper .getData()

如果是纯客户端的图片裁切，则使用：getCroppedCanvas 方法，该方法得到裁切之后的图片对象（类似于URL.createObjectURL 方法得到的文件对象）。

// 获取裁切的文件对象
cropper.getCroppedCanvas().toBlob((blob) => {
 console.log(blob)
 }

发送请求

try {
		// 如果接口要求 Content-type是 multipart/form-data
		// 则你必须传递fromdata对象
		const formData = new FormData()
		formData.append('photo', blob)
		const { data } = await changeUserPhoto(formData)
		console.log(data)
		// 关闭弹出层
		this.$emit('close')
		// 更新视图
		this.$emit('update-photo', data.data.photo)
		this.$toast.success('上传成功!')
	} catch (err) {
		this.$toast.fail('上传失败!')
		console.log(err)
	}

图片预览裁切有两种方法，结合服务器的图片上传预览或者纯客户端实现上传图片预览。
纯客户端实现上传图片预览 ：
定义一个input标签 type设置为file 设置自带的属性hidden

<input type="file" hidden ref="file" @change="onFileChange" />

对选择器表单进行隐藏,点击头像触发input表单的点击事件@click="$refs.file.click()"
在change事件中获取文文件对象
const file = fileInput.files[0]
设置图片的 src
this.img = window.URL.createObjectURL(file)
file-input 如果选择了同一个文件不会触发change事件
解决方法就是每次使用完毕 把他的value清空
this.$refs.file.value = ''

引用第三方库cropperjs处理图片裁切

npm install cropperjs
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

因为要操作DOM,所以要在组件初始化之后再调用

mounted() {
		const image = this.$refs.img
		this.cropper = new Cropper(image, {
			viewMode: 1,
			dragMode: 'move',
			aspectRatio: 1,
			autoCropArea: 1,
			cropBoxMovable: false,
			cropBoxResizable: false,
			background: false
		})
	}

项目要求默认配置

		viewMode: 1,
		dragMode: 'move',
		aspectRatio: 1,
		autoCropArea: 1,
		cropBoxMovable: false,
		cropBoxResizable: false,
		background: false

如果是基于服务端的裁切，则使用：getData 方法，该方法得到裁切的区域参数然后传给服务端。

this.cropper .getData()
如果是纯客户端的图片裁切，则使用：getCroppedCanvas 方法，该方法得到裁切之后的图片对象（类似于URL.createObjectURL 方法得到的文件对象）。

// 获取裁切的文件对象

cropper.getCroppedCanvas().toBlob((blob) => {
 console.log(blob)
 }

发送请求

try {
		// 如果接口要求 Content-type是 multipart/form-data
		// 则你必须传递fromdata对象
		const formData = new FormData()
		formData.append('photo', blob)
		const { data } = await changeUserPhoto(formData)
		console.log(data)
		// 关闭弹出层
		this.$emit('close')
		// 更新视图
		this.$emit('update-photo', data.data.photo)
		this.$toast.success('上传成功!')
	} catch (err) {
		this.$toast.fail('上传失败!')
		console.log(err)
	}