体检管理系统——文件上传功能(七牛云文件上传服务器)

页面使用ElementUI提供的上传组件el-upload，提供了多种不同的上传效果，上传成功后可以进行预览。

大致流程：

详细流程：
（1）定义模型数据，用于后面上传文件的图片预览：
imageUrl:null,//模型数据，用于上传图片完成后图片预览
（2）定义上传组件
2.1 浏览器端定义上传组件：

2.2 服务器端定义上传组件
spring-mvc：

pom.xml中导入坐标

2.3文件上传前，对文件的格式进行校验
//上传图片之前执行
beforeAvatarUpload(file) {
const isJPG = file.type === ‘image/jpeg’;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.KaTeX parse error: Expected 'EOF', got '}' at position 38: …能是 JPG 格式!'); }̲ if (!isLt2M) …message.error(‘上传套餐图片大小不能超过 2MB!’);
}
return isJPG && isLt2M;
},

（3）文件上传，服务器端定义文件上传服务器工具类以及在controller进行文件上传
3.1 七牛云工具类
public class QiniuUtils {
public static String accessKey = “fwMRibOzi5-iHLCt-atfqsIqMUGp43c5n5nA7siQ”;
public static String secretKey = “QxvzgKBhuXUdvMpRjGmZ336mosHK2Ggs0dpa4zyL”;
public static String bucket = “longmarch”;

public static void upload2Qiniu(String filePath,String fileName){
    //构造一个带指定Zone对象的配置类
    Configuration cfg = new Configuration(Zone.zone0());
    UploadManager uploadManager = new UploadManager(cfg);
    Auth auth = Auth.create(accessKey, secretKey);
    String upToken = auth.uploadToken(bucket);
    try {
        Response response = uploadManager.put(filePath, fileName, upToken);
        //解析上传成功的结果
        DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
    } catch (QiniuException ex) {
        Response r = ex.response;
        try {
            System.err.println(r.bodyString());
        } catch (QiniuException ex2) {
            //ignore
        }
    }
}

//上传文件
public static void upload2Qiniu(byte[] bytes, String fileName){
    //构造一个带指定Zone对象的配置类
    Configuration cfg = new Configuration(Zone.zone0());
    //...其他参数参考类注释
    UploadManager uploadManager = new UploadManager(cfg);

    //默认不指定key的情况下，以文件内容的hash值作为文件名
    String key = fileName;
    Auth auth = Auth.create(accessKey, secretKey);
    String upToken = auth.uploadToken(bucket);
    try {
        Response response = uploadManager.put(bytes, key, upToken);
        //解析上传成功的结果
        DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
        System.out.println(putRet.key);
        System.out.println(putRet.hash);
    } catch (QiniuException ex) {
        Response r = ex.response;
        System.err.println(r.toString());
        try {
            System.err.println(r.bodyString());
        } catch (QiniuException ex2) {
            //ignore
        }
    }
}

//删除文件
public static void deleteFileFromQiniu(String fileName){
    //构造一个带指定Zone对象的配置类
    Configuration cfg = new Configuration(Zone.zone0());
    String key = fileName;
    Auth auth = Auth.create(accessKey, secretKey);
    BucketManager bucketManager = new BucketManager(auth, cfg);
    try {
        bucketManager.delete(bucket, key);
    } catch (QiniuException ex) {
        //如果遇到异常，说明删除失败
        System.err.println(ex.code());
        System.err.println(ex.response.toString());
    }
}

}

扫描二维码关注公众号，回复： 9036690 查看本文章

3.2 在服务器的controller中定义文件上传
@RequestMapping("/upload")
public Result uploadImg( MultipartFile imgFile){
//1.获取文件的名称->获取文件的后缀名
//2.随机为文件生成一个名称–>uuid+后缀名
//3.调用七牛云存储的API(阿里云存储的API)完成文件的上传
//4.Result(true,“提示成功信息”,fileName)
}

/**
* 上传图片到文件系统服务器
* @param imgFile 文件的name属性
* @return 文件的名称
* 进行文件上传的时候，接受文件需要使用MultipartFile
* imgFile 需要和浏览器端文件上传组件的name保持一致
*/
@RequestMapping("/upload")
public Result uploadImg( MultipartFile imgFile){
try {
//1.获取文件的原始名称->获取文件的后缀名
String originalFilename = imgFile.getOriginalFilename();
// 获取最后一个点的索引位置
int index = originalFilename.lastIndexOf(".");
// 获取文件的后缀名
String suffix = originalFilename.substring(index);
// System.out.println(substring);
//2.随机为文件生成一个新的名称–>uuid+后缀名 防止文件名重复
String fileName = UUID.randomUUID().toString() + suffix;
//3.调用七牛云存储的API(阿里云存储的API)完成文件的上传
QiniuUtils.upload2Qiniu(imgFile.getBytes(),fileName);
//4.Result(true,“提示成功信息”,fileName)
return new Result(true,MessageConstant.PIC_UPLOAD_SUCCESS,fileName);
} catch (IOException e) {
e.printStackTrace();
// 文件上传失败
return new Result(false,MessageConstant.PIC_UPLOAD_FAIL);
}
}

（4）定义上传成功后的对应的钩子函数：

完成文件上传成功，有未处理的问题：
当客户上传成功图片后，数据库并没有存储图片名称，造成文件上传服务器的数据冗余。