一、vue3-cropper官网
vue3 github的readme
非vue3可以参考这份demo
二、使用
1.命令行安装
npm install vue3-cropper -S
2.组件内使用
<template><form ref="myForm"><input type="file" accept="image/*" @change="onChange" /><input type="button" value="提交" @click="onSubmit($event)" /></form><imgv-if="previewImage":src="previewImage"alt="预览图"style="max-width: 100%; max-height: 100%"/><Cropperv-if="cropperVisible":imagePath="imagePath"fileType="blob"@save="onSave"@cancel="onCancel"/></template>
js:
<script>import axios from "axios";import {reactive, toRefs, ref } from "vue";import Cropper from "vue3-cropper";import "vue3-cropper/lib/vue3-cropper.css";const URL = window.URL || window.webkitURL;export default {components: {Cropper },setup() {// cropper状态const state = reactive({cropperVisible: false,imagePath: "",previewImage: null,});// 获取图片const onChange = (e) => {const file = e.target.files[0];state.imagePath = URL.createObjectURL(file);state.cropperVisible = true;};// 保存选取的图片const onSave = (res) => {if (typeof res === "string") {state.previewImage = res;} else {state.previewImage = URL.createObjectURL(res);}state.cropperVisible = false;};// 取消选取const onCancel = () => {state.cropperVisible = false;};// 提交表单——上传文件const myForm = ref(null);const onSubmit = (e) => {let newFile = new File([state.file], state.file.name, {type: state.file.type,});let formData = new FormData();formData.append("file", newFile);formData.append("enctype", "multipart/form-data");console.log("提交头像");axios({method: "post",// 提交地址url: "",data: formData,}).then((response) => {console.log("上传头像返回信息", response.data.data);},(error) => {console.log("上传头像请求失败", error.data.message);});// 关闭提交表单e.preventDefault();};return {...toRefs(state),onChange,onSave,onCancel,myForm,onSubmit,};},};</script>
3.结果
1：
:2：
3：
