vue element-ui + java 上传文件到七牛云

Journeys end in lovers' meeting.
漂泊止于爱人的相遇。

使用场景：购物网站会涉及到很多图片的展示，存储在服务器很占用资源（个人的一台mac开发既要开发又要扮演服务器），这样开发起来还要考虑路径。想着有没有一种前端上传图片存储，直接返回图片外链来解决。

展示效果：

成功后返回值如下：

七牛云

前端使用的是upload上传组件，需要仔细看文档

<template>
  <div>
     <el-form-item label="缩略图" prop="smallModelPhoto">
     <el-upload
             action="http://upload-z0.qiniu.com"
             :accept="accept"
             list-type="picture"
             :limit=1
             :data="uptoken"
             :before-upload="beforeAvatarUpload"
             :on-remove="handleRemoveChange"
             :on-success="handleSuccessChange"
             :file-list="formData.smallModelPhoto">
         <el-button size="mini" type="primary">点击上传</el-button>
         <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且单张不超过10M，缩略图只能传一张</div>
     </el-upload>
  </el-form-item>
 </div>
</template>
<script>
  import Config from '../config'
  export default {
    data() {
      return {
        accept: "image/jpeg,image/gif,image/png,image/bmp",
        formData: {
          smallModelPhoto: [],
        },
        uptoken: {
          token: '',
          key: ""
        }
      }
    },
    methods: {
      beforeAvatarUpload(file) {
        this.uptoken.key = file.name;
        const isLt10M = file.size < 10 * 1024 * 1024;
        if (!isLt10M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        return isLt10M;
      },
      handleRemoveChange(file, fileList){
        var filelists = [];
        fileList.forEach(function (elem) {
          var item = {
            name: elem.name,
            url: Config.qiniu.action + elem.name
          }
          filelists.push(item);
        })

        this.formData.smallModelPhoto = filelists;
      },
      handleSuccessChange(response, file, fileList) { //上传成功后在图片框显示图片
        var filelists = [];
        fileList.forEach(function (elem) {
          var item = {
            name: elem.name,
            url: Config.qiniu.action + elem.name
          }
          filelists.push(item);
        })
        this.formData.smallModelPhoto = filelists;
      }
    },
    mounted: function () {
      var that = this;
      /**
       * 获取七牛云token
       */
      that.getUptoken = function () {
        that.$http.get("qiniu/getUpToken").then(function (res) {
          that.uptoken.token = res.data.data.upToken;
        })
      }
    }
  }
</script>

七牛云 Java SDK 属于七牛服务端SDK之一，主要有如下功能：

提供生成客户端上传所需的上传凭证的功能
提供文件从服务端直接上传七牛的功能
提供对七牛空间中文件进行管理的功能
提供对七牛空间中文件进行处理的功能
提供七牛CDN相关的刷新，预取，日志功能
Maven

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

最简单的上传凭证只需要AccessKey，SecretKey和Bucket就可以。

String accessKey = "access key";
String secretKey = "secret key";
String bucket = "bucket name";
Auth auth = Auth.create(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
System.out.println(upToken); // 把这个upToken传递给前端

整个操作其实不难，需要仔细看文档，还有不明白的问题欢迎留言！

vue element-ui + java 上传文件到七牛云

推荐阅读更多精彩内容