目 录CONTENT

文章目录

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

Gz
Gz
2023-09-11 / 0 评论 / 0 点赞 / 69 阅读 / 727 字 / 正在检测是否收录...

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 相关的方法和属性。
  • createObjectURLURL 对象的一个方法,用于创建一个新的 Blob URL 或 File URL。
  • file 可能是一个包含文件信息的对象,通常来自用户通过文件输入字段选择的文件。
  • file.raw 可能是文件的原始数据(二进制数据),通常以 BlobFile 对象的形式提供。
        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);
    }
}
0

评论区