前端插件库之vue3使用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：