【Vue3】完善vue-image-crop-upload的使用（修改源码）

【Vue3】完善vue-image-crop-upload的使用

前言

在GitHub上找适配vue3的图片裁剪，看到了vue-image-crop-upload这个项目，就直接拿来用了。

问题1：文件名不可自定义

用了一晚上，发现有个非常难受的点——图片上传的文件名不可以自定义，默认使用field字段，但是我用springboot写的后端的注解是@RequestPart("file")，这就导致了field必须得为file字符串才可以上传成功…

第二天起来开始改源码，成功解决就分享一下！

1、找到文件

首先在项目中找到这个库的位置，打开upload-3.vue

2、找到upload()方法

有一个upload()方法，拿出来分析一下：

可以看到它的逻辑就是，给一个FormData()对象的field传入图片二进制和图片名称。

因为field === 'file'，imgFormat === 'png'，所以这里的图片名称直接是file.png

3、自定义一个imageName的prop

那么如何自定义文件名呢？给这个组件的prop加入一个imageName的属性

然后在upload()方法这里传入这个imgName

使用方法就是双向绑定这个imgName

至于如何获取文件名，这个组件有一个@src-file-set="srcFileSet"方法，可以获取上传文件的大小、类型、文件名。我们在这个方法中截取一下文件名然后给imgName绑定一下就可以了

// 选取图片之后的钩子 
srcFileSet(fileName, fileType, fileSize) {
   
    if (fileName.indexOf(".") === -1