Springboot上传图片两种方法(自定义上传方法And默认方法)

前端实现

1.默认方法上传(on-success)

        <el-form-item label="品牌图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8088/merchandise_premiums/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="formData.brandLogo" :src="formData.brandLogo" class="avatar" height="30px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

函数实现：

URL.createObjectURL(file.raw) 是 JavaScript 中的一种方法，用于创建一个表示文件的 URL 对象。这通常用于将客户端的文件（例如用户从计算机中选择的文件）转换为可用于在网页中显示或处理的 URL。

在这个代码中：

• URL 是 JavaScript 中的一个内置对象，它提供了与 URL 相关的方法和属性。
• createObjectURL 是 URL 对象的一个方法，用于创建一个新的 Blob URL 或 File URL。
• file 可能是一个包含文件信息的对象，通常来自用户通过文件输入字段选择的文件。
• file.raw 可能是文件的原始数据（二进制数据），通常以 Blob 或 File 对象的形式提供。

        handleAvatarSuccess(res, file) {
            this.formData.brandLogo = URL.createObjectURL(file.raw);
        },

2.自定义方法上传(http-request)

        <el-form-item label="品牌图片">
          <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :http-request="getBasebaseStr"
          >
            <img v-if="formData.brandLogo" :src="formData.brandLogo" class="avatar" height="30px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

函数实现：

        getBasebaseStr(e) {
            console.log("=================");
            // 上传文件到图床
            uploadFile(e.file).then(res => {
                // 给图片赋值
                this.formData.brandLogo = res;
            })

        },

API方法

export function uploadFile(file) {
    let formData = new FormData();
    formData.append("file", file)
    var config = {
        headers:{'Content-Type':'multipart/form-data'}
    }
    return instance.post("/merchandise_premiums/upload", formData, config);
}

后端实现

用的之前图床写的工具类直接调用Hutool请求api调用图床

@RestController
@RequiredArgsConstructor
@RequestMapping("/merchandise_premiums/")
public class GgUploadController {
    /**
     *上传图片
     */
    @PostMapping("upload")
    public AxiosResult<String> upload(@RequestPart Part file) throws IOException {
        //判断是不是图片
        BufferedImage read = ImageIO.read(file.getInputStream());
        if (read==null){
            //上传的不是一个图片
            return AxiosResult.error(EnumStatus.IMG_NO_UPLOAD);
        }
        //判断上传图片格式对不对
        String filenameExtension = StringUtils.getFilenameExtension(file.getSubmittedFileName());
        if (!"jpg".equals(filenameExtension) && !"png".equals(filenameExtension)) {
            //上传格式不正确
            return AxiosResult.error(EnumStatus.IMG_NO);

        }
        //判断上传文件多大
        long size = file.getSize()/1024;
        if (size>200){
            //上传文件太大
            return AxiosResult.error(EnumStatus.IMG_NO_MAX);
        }
        // 获取到文件流
        InputStream inputStream = file.getInputStream();
        // 获取token
        String token = UploadImageUtils.getToken();
        // 获取文件名
        String imgName = file.getSubmittedFileName();
        // 上传图像获取返回的图片访问url
        String url = UploadImageUtils.upload(token, FileUtil.writeFromStream(inputStream, imgName));

        return AxiosResult.success(url);
    }
}