ElementUi+Java+七牛文件（客户端）上传，小白救命贴

我的帖子都是写给小白的，大神请绕行，我写的很基础也很细跟网上那些含含糊糊的帖子不同。还是那句话，大佬不用看，小白看不懂的玩意儿我是不会写的。

一、注册七牛云、实名认证、设置空间名称、绑定加速域名这些操作，官网都有引导，我就不说了。

直接从代码接入开始，如果对ElementUi不熟，或者对Vue不了解，请先自行去补课。

前端代码

<template>
  <div>
    <!--去elementUi官网查el-upload文档-->
   <!--这里的action为华北河北区的上传链接-->
   <el-upload  
       action="http://upload-z1.qiniup.com"       
       :http-request="sliderRequest" 
       :name="fileName" 
       :before-upload="handleUpload"
       :drag="true"
       :on-success="handleQiniuSuccess"
       :on-error="handleError"
       >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em> </div>
    </el-upload>

   </div>
</template>

七牛区域存储列表大家可以根据开通的区域自行选择：存储区域_产品简介_对象存储 - 七牛开发者中心

当http-request参数被赋值后会直接走方法指定的自定义上传

//在声明周期methods里自定义上传方法sliderRequest
methods: {
       // 自定义文件上传方法
       sliderRequest(upload) {

           let _this = this;

         // 创建FormData对象 添加相关上传参数
          const formData = new FormData()
         // 文件对象加入参数
          formData.append('file', upload.file)


       /** 这个filename（也就是formData中的key参数），就是上传到七牛个人空间的文件（含路径）
            如果包含路径上传，则会在空间根目录下寻找目标路径并上传文件，如果没有该路径则自动新建
             如果不包含路径，则将文件直接上传到根目录
         */
           let  filename = "course/pic/"+upload.file.name;  
           formData.append('key', filename)


          /**此方法我是自己写在后端Api接口里的，你可别说你不会请求自己的后台Api接口。
             后端接口里就是获取上传token的方法，这里把filename传进去，是为了实现覆盖上传。
             覆盖上传是为了在同一文件的唯一性，防止文件冲突，当然也不是必须的。*/ 
           getqiniuToken(filename).then(qiniures=>{

                // 从后台拿到的七牛upToken也添加到formData的参数中
               formData.append('token', qiniures.upToken); 

               //用axios.post的方式进行文件上传
               //这里的http://upload-z1.qiniup.com为华北河北区的上传链接
               axios.post("http://upload-z1.qiniup.com", formData,
               {
                  onUploadProgress: (event) => {
                      // 监听上传进度
                      event.percent = event.loaded / event.total * 100
                      upload.onProgress(event)
                  }
              }).then((response) => {
                  const res = response.data
                  if (res.code === 200) {
                       //调用上传成功的方法
                      _this.handleQiniuSuccess();
                  }
              }).catch((err) => {
                  // 调用组件上传失败方法
                  _this.handleError();
              })
         }) 
              }
}

java后端代码我是Maven项目首先先在pom.xml里增加依赖

        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>qiniu-java-sdk</artifactId>
            <version>[7.13.0, 7.13.99]</version>
        </dependency>

        <dependency>
            <groupId>com.squareup.okhttp3</groupId>
            <artifactId>okhttp</artifactId>
            <version>3.14.2</version>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.5</version>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>happy-dns-java</artifactId>
            <version>0.1.6</version>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>

我自己写了个api接口类来返回upToken

package com.hz.myplugins.plugin.qiNiu;


import com.alibaba.fastjson.JSONObject; 
import com.qiniu.util.Auth;
import io.swagger.annotations.ApiOperation;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/qiniu")
 public  class   qiNiuUtil{

    @RequestMapping("/getqiniuToken")
    @ApiOperation(value = "获取上传token")
    @ResponseBody //实现数据接口
    public JSONObject getqiniuToken( @RequestParam(value="filename", defaultValue = "") String filename){

        String accessKey = "你自己七牛的AK";
        String secretKey = "你自己七牛的SK";
        String bucket = "aaaa"; //这里是你七牛的空间名称，不是加速域名，就是最简单那个空间名称
        Auth auth = Auth.create(accessKey, secretKey);

        //这里加上filename就能保证覆盖上传了，或者将filename直接设为null，就是一般上传了
        String upToken = auth.uploadToken(bucket,filename); 
        JSONObject result = new JSONObject();
        result.put("code",200);
        result.put("upToken",upToken);
        return result ;
    }


}