欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-18 17:10:46
...

页面使用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());
    }
}

}

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)定义上传成功后的对应的钩子函数:
体检管理系统——文件上传功能(七牛云文件上传服务器)

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