VUE项目头像裁剪功能（个人项目）

VUE头像裁剪功能

思路：
方案一：学长用的是vue-image-crop-upload来实现的 学长的代码中css使用了sass，而我安装sass不成功，可能是nodejs版本的问题，所以暂且不用这个方案
方案二：我还可以使用vuecropper进行图片裁剪，网上找了样例模板，但是这个方案前端获取到的是base64或blob格式的，而最后上传七牛云需要MultipartFile格式，所以涉及到了一个格式转换问题，要么前端转为MultipartFile格式传到后端，要么后端接收到base64/blob格式后转为MultipartFile格式

暂且没有对比两种方案实现起来有什么弊端，如果非要比较的话，学长的方案肯定是要更方便的，但是我比较懒，懒得去弄更低版本的nodejs，所以我考虑先按第二种方案走下去

然后用网上找的自定义工具类代码把base64格式转成了MultipartFile格式，然后遇上了一个io格式bug，但是我查看七牛云代码底层发现不用传fileInputstream，直接用Inputstream就好了

这里贴出某个大佬的base64格式转成MultipartFile格式的转换代码，由于浏览器清空了，我忘了大佬号是什么了，等过段时间我去找找出处在哪，然后把作者po出来

import org.springframework.web.multipart.MultipartFile;

import java.io.*;
import java.nio.charset.StandardCharsets;
import java.util.Base64;

/**
 * Created by ShuSheng007
 * <p>
 * author     : ShuShneg007
 * date       : 2021/6/25 19:09
 * description:
 */
public class Base64ToMultipartFile implements MultipartFile {
    private final byte[] fileContent;

    private final String extension;
    private final String contentType;


    /**
     * @param base64
     * @param dataUri     格式类似于: data:image/png;base64
     */
    public Base64ToMultipartFile(String base64, String dataUri) {
        this.fileContent = Base64.getDecoder().decode(base64.getBytes(StandardCharsets.UTF_8));
        this.extension = dataUri.split(";")[0].split("/")[1];
        this.contentType = dataUri.split(";")[0].split(":")[1];
    }

    public Base64ToMultipartFile(String base64, String extension, String contentType) {
        this.fileContent = Base64.getDecoder().decode(base64.getBytes(StandardCharsets.UTF_8));
        this.extension = extension;
        this.contentType = contentType;
    }

    @Override
    public String getName() {
        return "param_" + System.currentTimeMillis();
    }

    @Override
    public String getOriginalFilename() {
        return "file_" + System.currentTimeMillis() + "." + extension;
    }

    @Override
    public String getContentType() {
        return contentType;
    }

    @Override
    public boolean isEmpty() {
        return fileContent == null || fileContent.length == 0;
    }

    @Override
    public long getSize() {
        return fileContent.length;
    }

    @Override
    public byte[] getBytes() throws IOException {
        return fileContent;
    }

    @Override
    public InputStream getInputStream() throws IOException {
        return new ByteArrayInputStream(fileContent);
    }

    @Override
    public void transferTo(File file) throws IOException, IllegalStateException {
        try (FileOutputStream fos = new FileOutputStream(file)) {
            fos.write(fileContent);
        }
    }

}

ps：七牛云的私密空间上传存储后会只返回图片名，不能直接访问，还要搞一系列验证什么的，公开空间上传存储后会返回域名+图片名称，可以直接访问

ps：前端需要在七牛云返回的path前加上http：//前缀才能进行访问