SpringBoot + Vue整合七牛云

依赖

        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>qiniu-java-sdk</artifactId>
            <version>7.2.18</version>
        </dependency>

        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>happy-dns-java</artifactId>
            <version>0.1.6</version>
            <scope>test</scope>
        </dependency>

Service

import java.io.FileInputStream;

public interface UpdateImageService {
    String uploadQNImg(FileInputStream file, String key);
    String deleteImg(String fileName);
}

ServiceImpl

package com.home.backend.service.impl;

import com.google.gson.Gson;
import com.home.backend.service.UpdateImageService;
import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
import org.springframework.stereotype.Service;

import java.io.FileInputStream;

@Service
public class UpdateImageServiceImpl implements UpdateImageService {

    private static final String ACCESS_KEY = "AK";
    private static final String SECRET_KEY = "SK";
    private static final String BUCKETNAME = "dizhi";
    private static final Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
    private static final String DOMAIN = "tuchuang.yangcedu.top";

    //将图片上传到七牛云
    @Override
    public  String uploadQNImg(FileInputStream file, String key) {
        // 构造一个带指定Zone对象的配置类, 注意这里的Zone.zone0需要根据主机选择
        Configuration cfg = new Configuration(Zone.zone2());
        // 其他参数参考类注释
        UploadManager uploadManager = new UploadManager(cfg);
        // 生成上传凭证，然后准备上传

        try {
            String upToken = auth.uploadToken(BUCKETNAME);
            try {
                Response response = uploadManager.put(file, key, upToken, null, null);
                // 解析上传成功的结果
                DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);

                // 这个returnPath是获得到的外链地址,通过这个地址可以直接打开图片
                return DOMAIN + "/" + putRet.key;
            } catch (QiniuException ex) {
                Response r = ex.response;
                System.err.println(r.toString());
                try {
                    System.err.println(r.bodyString());
                } catch (QiniuException ex2) {
                    //ignore
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "";
    }
    @Override
    public String deleteImg(String fileName) {
        Configuration cfg = new Configuration(Zone.zone2());
        BucketManager bucketManager = new BucketManager(auth, cfg);
        try {
            bucketManager.delete(BUCKETNAME, fileName);
            return "删除成功";
        } catch (QiniuException e) {
            return "删除失败";
        }
    }
}

Conteoller

package com.home.backend.controller;

import com.home.backend.service.impl.UpdateImageServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.FileInputStream;
import java.io.IOException;
import java.util.Map;
import java.util.UUID;

@Controller
public class UpdateImageController {

    @Autowired
    private UpdateImageServiceImpl uploadImageServiceImpl;

    @ResponseBody
    @PostMapping("/api/upload/")
    public String postUserInferUpDate(@RequestParam("file") MultipartFile file) throws  IOException {

        // 用来获取其他参数
        if (!file.isEmpty()) {
            FileInputStream inputStream = (FileInputStream) file.getInputStream();
            //获得上传的图片地址
            String path = uploadImageServiceImpl.uploadQNImg(inputStream, UUID.randomUUID().toString().substring(0,8)); // KeyUtil.genUniqueKey()生成图片的随机名
            System.out.print("七牛云返回的图片链接:" + path);
            return path;
        }
        return "上传失败";
    }

    @ResponseBody
    @PostMapping("/api/img/delete/")
    public String delete(@RequestParam Map<String, String> data) {
        return uploadImageServiceImpl.deleteImg(data.get("filename"));
    }

}

前端

<template>

  <input type="file" id="files1" @change="put">


  <a href="http://www.yangcedu.top/" >
    <el-col :span="8">
      <el-card style="" shadow="hover"> Hover </el-card>
    </el-col>
  </a>

  <el-button @click="delete1">
    删除
  </el-button>

</template>

<script>

import $ from 'jquery'
import { ref } from 'vue';
export default {
    setup() {

      let put = () => {
        const selectedFile = document.getElementById('files1').files[0];
        let fromdate = new FormData();

        fromdate.append("file", selectedFile);
        $.ajax({
          url: "http://127.0.0.1:3000/api/upload/",
          type: "post",
          data: fromdate,
          cache: false,
          processData: false,
          contentType: false,
          success(resp) {
            console.log(resp);
          },
          error(resp) {
            console.log(resp);
          }
        })
      }

      let delete1 = () => {
        const fileName = ref('39da4f9d');
        $.ajax({
          url: "http://127.0.0.1:3000/api/img/delete/",
          type: "post",
          data: {
            filename: fileName.value,
          },
          success(resp) {
            console.log(resp);
          },
          error(resp) {
            console.log(resp);
          }
        })
      }

      return {
        put,
        delete1,
      }

    }
}

</script>

<style>

a {
  text-decoration: none;
}

</style>

设置

spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=5MB  //单个文件
spring.servlet.multipart.max-request-size=50MB  //全部文件