antd vue上传图片至后端

最近项目有个需求需要在前端vue上传图片，然后在后端将图片存到本地的一个文件夹下。

1、vue

这里是将上传图片封装成了一个组件来使用，组件名为 upload-image.vue

注意：后端路径有个地方需要注意，关于这里的 ' /api '，我在vue.config.js做了跨域处理

2、后端springboot

@RestController
@RequestMapping("/file")
public class UploadImageController {
    //这里的 faceImage 就是 a-upload 的 name 属性
    @PostMapping("/upload")
    public void uploadImage(@RequestParam("faceImage") MultipartFile pic) {
        /*
         * 编码为字符串
         */
        String base64Str = "";
        try {
            base64Str = Base64Utils.encodeToString(pic.getBytes());     //将图片转化为base64格式
            String imgName = pic.pic.getOriginalFilename();             //获取到图片原本的名字
            storeImageAtLocal(base64Str, imgName);                      //为了方便在其他地方调用，这里封装成了一个工具类
        }catch (IOException e){
            e.printStackTrace();
        }
    }
}

public class UploadUtil {
    //这里的pathName表示 你要存到哪，图片名叫啥，如D:\\resources\\image\\smile.jpg

    public static void storeImageAtLocal(String base64ImgData,String pathName){
        Base64.Decoder decoder = Base64.getDecoder();
        byte[] bytes = decoder.decode(base64ImgData);
        /*
         * 字节流转文件
         */
        FileOutputStream fos = null;
        try {
            fos = new FileOutputStream(pathName);
            fos.write(bytes);
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (fos != null){
                try {
                    fos.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    //本地图片转base64编码数据
    public static String getImageBase64Data(String localPath){
        File file = new File(localPath);    //URL url = new URL(src);
        byte[] data = null;
        try {
            InputStream in = new FileInputStream(file);  //InputStream in = url.openStream();
            data = new byte[in.available()];
            in.read(data);
            in.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

        Base64.Encoder encoder = Base64.getEncoder();
        return encoder.encodeToString(data);
    }

}