一、vue3-cropper官网

二、使用

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：

前端插件库之vue3使用vue3-cropper上传头像（裁剪图片、上传）相关推荐

手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象效果图原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
一些实用的前端插件库（不定时更新）
1.基于vue的表格组件:vxe-table 官网:https://vxetable.cn/#/table/start/install 下载: npm install --save vxe-table ...
vue3开发1：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（一）
最近尝试用了vue3进行开发,没想到在使用element-plus框架的时候出现了bug(一个星期后官方修复了),所以我对在项目中集成富文本插件ckeditor5比较忐忑,而且也没有vue3中集成ck ...
vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
上传头像裁剪vue3（vue-cropper）配合element的upload
实现效果如下: 一.安装 npm install vue-cropper --save 二.在main.js中引入 import VueCropper from 'vue-cropper'; impo ...
php web裁剪图片上传,WEB前端实现裁剪上传图片功能
最后的效果如下: 这里面有几个功能,第一个是支持拖拽,第二个压缩,第三个是裁剪编辑,第四个是上传和上传进度显示,下面依次介绍每个功能的实现: 1. 拖拽显示图片拖拽读取的功能主要是要兼听html5的 ...
cropper基本用法（裁剪图片）
1.基本使用步骤在 <head> 中导入 cropper.css 样式表: <link rel="stylesheet" href=" ...
前端插件库之vue3使用vue-codemirror插件
vue3插件vue-codemirror使用步骤和实例 vue-codemirror 使用配置说明: 个人代码编辑区Demo vue-codemirror 基于 CodeMirror ,适用于 Vu ...
前端插件库之vue3使用v-md-editor插件
vue3使用v-md-editor插件 v-md-editor 相关配置 [ -- 中文文档](http://ckang1229.gitee.io/vue-markdown-editor/zh/) 使 ...

前端插件库之vue3使用vue3-cropper上传头像（裁剪图片、上传）

一、vue3-cropper官网

二、使用

3.结果

前端插件库之vue3使用vue3-cropper上传头像（裁剪图片、上传）相关推荐

最新文章

热门文章