前端插件库之vue3使用vue3-cropper上传头像(裁剪图片、上传)
vue3-cropper切割图片并上传
·
一、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>
<img
v-if="previewImage"
:src="previewImage"
alt="预览图"
style="max-width: 100%; max-height: 100%"
/>
<Cropper
v-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:
更多推荐
已为社区贡献5条内容
所有评论(0)