1、需求描述

用户发布帖子，需要用到上传图片功能，并进行图片回显。

2、环境

前端：uniapp + uview1.8

后端：springboot 2.5.13

3、具体流程

用户在前端上传图片后，交由后端处理，上传至七牛云，并返回相关数据。

3、1先前准备

1、前往七牛云，注册，学生认证后可免费领取12个月的【成长计划专属资源包】。

注册完毕之后，建立自己的空间，点击控制台，进入控制台页面。

这里可是使用公开，公开便于后端进行操作，可以免去对Bucket（你所建立的存储空间）相关认证。

2、后端配置

2、1在application.yml中配置七牛云

其中accessKey与secretKey在七牛云的个人中心/密钥管理处获取

url在刚刚建立的Bucket的空间概览中有一个免费的域名，如果自己有域名可自行设置。

2、2建立ImageUtils

注：uploadImageQiniu方法的返回值进行了封装，便于后续删除、处理相关业务操作。

package com.example.esdemo.utils;import com.example.esdemo.pojo.QiNiuImage;
import com.qiniu.common.QiniuException;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.Region;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;import javax.annotation.PostConstruct;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.*;/*** @author eiqiu* @date 2023/1/9* 七牛云图片上传*/
@Component
public class ImageUtils {@Value("${qiniu.accessKey}")private String accessKey;@Value("${qiniu.secretKey}")private String secretKey;@Value("${qiniu.bucket}")private String bucket;@Value("${qiniu.url}")private String url;/** 七牛文件上传管理器 */private UploadManager uploadManager;/** 七牛文件管理器 */private BucketManager bucketManager;/** 七牛云认证工具 */private Auth auth;/** 七牛云上传的token */private String token;@PostConstructprivate void init() {uploadManager = new UploadManager(new Configuration(Region.huabei()));auth = Auth.create(accessKey, secretKey);bucketManager = new BucketManager(auth, new Configuration(Region.huabei()));token = auth.uploadToken(bucket);}/*** 多文件上传至七牛云* @param multipartFiles 文件集合* @return 文件外链映射集合*/public Map<String, List<String>> uploadImages(MultipartFile[] multipartFiles){Map<String,List<String>> map = new HashMap<>();List<String> imageUrls = new ArrayList<>();for(MultipartFile file : multipartFiles){QiNiuImage qiNiuImage = uploadImageQiniu(file);imageUrls.add(qiNiuImage.getPath());}map.put("imageUrl",imageUrls);return map;}/*** 上传文件至七牛云* @param multipartFile 文件* @return 文件外链地址*/public QiNiuImage uploadImageQiniu(MultipartFile multipartFile){try {//1、获取文件上传的流byte[] fileBytes = multipartFile.getBytes();/** * 此处可以根据不同的业务类型，创立相应的文件夹，方便管理* 为了方便，此处仅使用日期来创立文件夹 *  *///2、创建日期目录分隔SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd");String datePath = dateFormat.format(new Date());//3、获取文件名String originalFilename = multipartFile.getOriginalFilename();assert originalFilename != null;// 文件类型String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));// 生成新的文件名String fileKey = UUID.randomUUID().toString().replace("-", "");String bucket = this.bucket;// 文件在bucket下的存储目录String path = datePath+"/"+ fileKey + suffix;//4.上传图片至七牛云uploadManager.put(fileBytes,path,token);// 这里进行了自定义封装，/*** {bucket: "文件所在bucket“, * fileKey: "文件的新名称，全局唯一，方便存入数据库”, * path: "外链地址，用于前端展示"* fileName: "文件在bucket下的存储目录,便于删除"}*/return new QiNiuImage(bucket, fileKey, url+"/"+path, path);} catch (IOException e) {e.printStackTrace();}return null;}/**** @param bucketName 空间名称* @param fileName 文件存储位置：如 /2023/1/9/sadihfuehjdshdcjbhuasd.png* @return 是否删除*/public boolean removeImageQiniu(String bucketName, String fileName) {try {bucketManager.delete(bucketName, fileName);} catch (QiniuException e) {e.printStackTrace();}return true;}}

2、3服务接口

注：service层没写什么业务逻辑，仅仅是调用了util，省略。

package com.example.esdemo.controller;import com.example.esdemo.pojo.QiNiuImage;
import com.example.esdemo.pojo.Result;
import com.example.esdemo.serivice.QiNiuService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;/*** @author eiqiu* @date 2023/1/9*/
@Slf4j
@RestController
@RequestMapping("/user")
public class UploadController {@Autowiredprivate QiNiuService qiNiuService;@RequestMapping(value = "/upload", method = RequestMethod.POST)public Result upLoadImage(@RequestPart("file") MultipartFile file) {log.info("执行了=>上传图片方法");QiNiuImage path = qiNiuService.uploadImage(file);if (path != null) {log.info("七牛云返回路径");return Result.success(200,"图片上传成功",path);} else {return Result.failure(401,"图片为空");}}@RequestMapping(value = "/remove", method = RequestMethod.POST)public Result removeImage(@RequestBody QiNiuImage qiNiuImage) {System.out.println(qiNiuImage);boolean result = qiNiuService.removeImage(qiNiuImage.getBucket(), qiNiuImage.getFileName());System.out.println(result);return Result.success();}}

3、前端代码

主要参数说明：

:action="action" ，其中action为自己的后端接口地址,此处http://localhost:8080/user/upload

:auto-uload="true"，上传图片自动上传开启

@on-success="successUpload"，文件上传至后端后，回调函数

@on-remove="removeImage"，删除图片函数

:max-count="2"，最大上传图片数量

其他相关参数请见官网uvuew1.x版本

<u-upload ref="uUpload" :action="action" :auto-upload="true":file-list="fileList" @on-success="successUpload" @on-remove="removeImage"class="appeal-image" :max-count="2" :width="180" :height="180"></u-upload>

图片上传成功回调函数逻辑：

上传图片至后端成功后，将后端处理好的图片数据（id，外链地址，存储空间Bucket名称，存储目录）传入表单。

图片删除操作逻辑：

index代表用户选择的图片索引，先获取该图片的相关数据（主要起作用的是存储空间Bucket、存储目录），传入后端处理，进行删除七牛云下的该文件，然后将表单中的该图片数据删除。

            // 图片上传成功回调函数successUpload(data, index, lists, name) {this.form.appealImages.push(data.data);},// 删除请求操作async removeImage(index) {try{const res = await removeImageQiniu(this.form.appealImages[index]);this.form.appealImages.splice(index,1);}catch(e){//TODO handle the exception}},

上传成功后，七牛云的该空间下便创建了我们上传的图片。删除操作也是如此。

注：如何上传文件至私有空间并获取文件链路地址？

如果要上传至私有空间，需要每次进行鉴权，并且设置图片外链地址失效时间，具体代码如下。（仅小小演示）

/*** 获取私有空间文件* @param path 文件地址 url + fileName* @return*/public String getPrivateFile(String path) {// 外链过期时间1小时，可以自定义链接过期时间long expireInSeconds = 3600;return auth.privateDownloadUrl(path, expireInSeconds);}

以上便是整个的操作。

springboot+vue实现七牛云上传图片功能相关推荐

springboot+vue+element+七牛云+实现图片上传功能
注册七牛云链接地址: https://www.qiniu.com/products/kodo,免费有10G空间与免费一个月的域名地址注册后,开启对象存储,创建空间选择地区, 上传方式: 1:前端现将 ...
七牛云上传图片到七牛云并返回图片URL
七牛云上传图片到七牛云并返回图片URL 鸣谢'追逐盛夏流年':https://blog.csdn.net/j1231230/article/details/80061834 在开发项目的时候,经常会 ...
使用七牛云上传图片时出现Network error during preQuery和运行时出现okhttp的问题
问题描述 1.使用七牛云上传图片时出现Network error during preQuery,但网络正常原因分析:排除网络原因,尝试网络配置方向调整 Configuration configur ...
七牛云上传图片和视频
先说本文主要的重点: 七牛云上传图片(包括从相机获取的和从相册获取的) 七牛云上传视频 8.0手机调起相机都会进行描述多图片和多视频上传获取图片后缀 ...
Java实现七牛云上传图片、读取图片链接
Java后端实现七牛云上传图片.读取图片链接添加依赖 <dependency><groupId>com.qiniu</groupI ...
七牛云上传图片报错处理
{ResponseInfo:com.qiniu.http.Response@62bd765,status:400, reqId:d4kAAACMt2hWMSEW, xlog:X-Log, xvia:, ...
python对接七牛云上传图片代码,可运行
python对接七牛云上传图片,可运行一.准备工作注册七牛云获取: 1.Access Key(注册认证后自动生成) 2.Secret Key(注册认证后自动生成) 3.空间名称:ihome(创建空 ...
SpringBoot 整合七牛云上传图片
在个人的一个项目中有一些需求需要用到图片文件上传,那么相比于阿里云我选择了七牛云,主要还是想白嫖,哈哈. 七牛云每个月有一定的免费额度,对于目前我的项目来说还是足够用的阿里云OSS个人理解是上传不收 ...
七牛云上传图片并返回图片URL
1.七牛云注册登录 https://portal.qiniu.com/signup/choice 完成实名认证,传身份证正反面之等,大概一个小时左右就认证成功了 2.新建存储空间地区可以自己选择 3 ...

springboot+vue实现七牛云上传图片功能

1、需求描述

2、环境

3、具体流程

3、1先前准备

springboot+vue实现七牛云上传图片功能相关推荐

最新文章

热门文章