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 mon.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.ponent;import org.springframework.web.multipart.MultipartFile;import javax.annotation.PostConstruct;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.*;/*** @author eiqiu* @date /1/9* 七牛云图片上传*/@Componentpublic 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 文件存储位置：如 //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 /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);}

以上便是整个的操作。