本文共 4504 字，大约阅读时间需要 15 分钟。

0.准备

注册并实名七牛云

1.vue安装所需环境

npm i element-ui -S

pom依赖：

               
    
     com.qiniu
                
    
     qiniu-java-sdk
                
    
     [7.3.0, 7.3.99]
            
           
               
    
     com.google.code.gson
                
    
     gson
                
    
     2.8.5
                
    
     compile
            
   

2.main.js中导包

import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
     el: '#app',  router,  components: {
    App },  template: '
   '})

3.index.vue页面

4.insert.vue页面

5.后端：上传工具类

public class UploadUtils {
       public String upload(MultipartFile multipartFile){
           //构造一个带指定 Region 对象的配置类        Configuration cfg = new Configuration(Region.region0());        //...其他参数参考类注释        UploadManager uploadManager = new UploadManager(cfg);        //...生成上传凭证，然后准备上传        String accessKey = "自己的ak";        String secretKey = "自己的sk";        String bucket = "自己的名称";        //默认不指定key的情况下，以文件内容的hash值作为文件名        String key = null;        try {
               byte[] bytes = multipartFile.getBytes();            ByteArrayInputStream byteInputStream=new ByteArrayInputStream(bytes);            Auth auth = Auth.create(accessKey, secretKey);            String upToken = auth.uploadToken(bucket);            try {
                   Response response = uploadManager.put(byteInputStream,key,upToken,null, null);                //解析上传成功的结果                DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);                System.out.println(putRet.key);                System.out.println(putRet.hash);                return "自己的网址"+putRet.key;            } catch (QiniuException ex) {
                   Response r = ex.response;                System.err.println(r.toString());                try {
                       System.err.println(r.bodyString());                } catch (QiniuException ex2) {
                       //ignore                }            }        } catch (UnsupportedEncodingException ex) {
               //ignore        } catch (IOException e) {
               e.printStackTrace();        }        return "";    }}

6.后端：上传Controller

@RequestMapping("/upload")    public String upload(@RequestParam("file") MultipartFile multipartFile){
           System.out.println(multipartFile.getOriginalFilename());        UploadUtils uploadUtils = new UploadUtils();        String upload = uploadUtils.upload(multipartFile);        return upload;    }

7.后端：分页实体类，serviceImpl和controller

实体类

@Datapublic class BookResp
   
     {
       public List
    
      list;    public Long total;}
    
   

serviceImpl

@Override    public BookResp findAll(Integer page, Integer size) {
           PageRequest pageRequest = new PageRequest(page, size);        BookResp bookResp = new BookResp<>();        Page
   
     all = bookRespository.findAll(pageRequest);        if(all!=null){
               List
    
      content = all.getContent();            bookResp.setList(content);            long totalElements = all.getTotalElements();            bookResp.setTotal(totalElements);            return bookResp;        }        return null;    }
    
   

controller

@RequestMapping("/findAll/{page}/{size}")    public BookResp findAll(@PathVariable("page")Integer page,@PathVariable("size") Integer size){
           BookResp bookResp=bookservice.findAll(page-1,size);        return bookResp;    }

效果图：

转载地址：http://qcezi.baihongyu.com/