一、vue3-cropper官网

vue3 github的readme
非vue3可以参考这份demo

二、使用

1.命令行安装

npm install vue3-cropper -S
1

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

3.结果

1：
:2：
3：