Vue+SpringBoot整合七牛云图片上传

SpringBoot整合七牛云图片上传

1、注册七牛云

七牛云官网：七牛云官网
注册登陆以后点击管理控制台

在对象存储中添加新的存储空间。

点击控制台右上角头像选择密钥管理

在密钥管理界面有AK和SK，这在后面的代码要用到。
接下来就是代码的编写了。

2、疑问

网上其他教程都在application.yml配置了相关的ak,sk,bucket以及baseuploadurl。我在七牛官方文档看好像并没有用到baseUploadUrl，七牛上传图片需要在本地缓存一个临时对象吗？希望有大佬看到我的问题可以帮忙解答。

3、编写相关实现代码

引入七牛云的相关依赖：

		<!--七牛云-->
        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>qiniu-java-sdk</artifactId>
            <version>7.2.28</version>
        </dependency>
        <!--Gson包-->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.6</version>
        </dependency>

Service层：

import com.qiniu.http.Response;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;


public interface UploadPictureService {
    String uploadPicture(MultipartFile file) throws IOException;
}

ServiceImpl层

import com.google.gson.Gson;
import com.learn.wyg.service.UploadPictureService;
import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.Region;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
import com.qiniu.util.Json;
import com.qiniu.util.StringMap;
import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.util.Random;


/**
 * @description:
 * @author: WYG
 * @time: 2020/4/18 15:46
 */
@Service
public class UploadPictureServiceimpl implements UploadPictureService {


    @Override
    public String uploadPicture(MultipartFile file) throws IOException {
        String qiniuUrl = "你的外链域名";
        Configuration configuration = new Configuration(Region.region0());
        UploadManager uploadManager = new UploadManager(configuration);
        String accessKey = "你的AK";
        String secretKey = "你的SK";
        String bucket = "你的存储空间名称";
        String key = getRandomCharacterAndNumber(10) + ".png";//生成随机文件名
        Auth auth = Auth.create(accessKey,secretKey);
        String uptoken = auth.uploadToken(bucket);
        String responseUrl = "";
        try{
            byte[] localFile = file.getBytes();
            Response response = uploadManager.put(localFile,key,uptoken);
            DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
            responseUrl = responseUrl + qiniuUrl + putRet.key;
        }catch (QiniuException e){
            Response r = e.response;
        }
        return responseUrl;
    }

    public static String getRandomCharacterAndNumber(int length) {
        String val = "";
        Random random = new Random();
        for (int i = 0; i < length; i++) {
            String charOrNum = random.nextInt(2) % 2 == 0 ? "char" : "num"; // 输出字母还是数字

            if ("char".equalsIgnoreCase(charOrNum)) // 字符串
            {
                int choice = random.nextInt(2) % 2 == 0 ? 65 : 97; // 取得大写字母还是小写字母
                val += (char) (choice + random.nextInt(26));
                // int choice = 97; // 指定字符串为小写字母
                val += (char) (choice + random.nextInt(26));
            } else if ("num".equalsIgnoreCase(charOrNum)) // 数字
            {
                val += String.valueOf(random.nextInt(10));
            }
        }
        return val;
    }
}

Controller层

import com.learn.wyg.service.UploadPictureService;
import com.learn.wyg.utils.JsonResult;
import com.qiniu.http.Response;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

/**
 * @description:
 * @author: WYG
 * @time: 2020/4/18 15:54
 */

@RestController
@RequestMapping("/api/upload")
public class UploadController {
    @Autowired
    private UploadPictureService uploadPictureService;

    @PostMapping("/picture")
    @CrossOrigin
    public JsonResult<String> uploadPicture(@RequestParam("file") MultipartFile multipartFile) throws IOException {
        String pictureUrl = uploadPictureService.uploadPicture(multipartFile);
        return new JsonResult<String>(pictureUrl,"200","success");
    }
}

Controller层
以上代码可以直接拿去用。

4、前端使用Element-ui的upload组件实现上传

			<el-upload
                class="upload-picture"
                action="http://localhost:8081/api/upload/picture"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-success="handleSuccess"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>

	handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleSuccess (response, file, fileList) {
      this.ForumAndTag.forum.first_picture = response.data
      this.$message.success(this.ForumAndTag.forum.first_picture)
    }

可直接在on-success对应的函数中获取上传图片后后端返回的信息，例如图片地址，然后通过图片地址进行展示
具体可访问elementui官网：Element-ui
upload组件部分参数

当然，对象存储还有阿里云的对象存储，不过我还没有用过，以后用了再介绍。