iView Upload 七牛云上传文件、图片

 1、iView代码

        http://v1.iviewui.com/components/upload

        <FormItem label="七牛云上传图片" prop="imgUrl">
          <Col span="16" style="text-align: center;">
            <img :src="addForm.imgUrl" style="height: 70px;" />
          </Col>
          <Col span="6" offset="1" style="text-align: center;">
            <Upload :action="'https://upload.qiniup.com'"
                    :data="uploadParams"
                    :default-file-list="[]"
                    :format="['jpg','jpeg','png']"
                    :on-format-error ="handleFormatError"
                    :on-success="handleAddFileSuccess"
                    :before-upload="beforeUpload"
            >
              <Button icon="ios-cloud-upload-outline">上传图片</Button>
            </Upload>
          </Col>
        </FormItem>

效果

2、方法

1）获取七牛云token

import { getFileUploadToken } from '@/api/banner'

2）其他方法（其中beforeUpload异步获取七牛云token，同步获取第一次上传时会失败）

data () {
  return {
    uploadParams: {}
  },
},
methods: {

    handleFormatError (request, file) {
      console.log(request, 'beforeUpload format')
      this.$Notice.warning({
        title: '格式错误',
        desc: '请上传png、jpg、jpeg格式文件'
      })
    },
    async beforeUpload (request) {
      console.log(request, 'beforeUpload')
      // **注意这里的参数必须通过属性赋值，如果直接修改整个uploadParams是无效的。**
      // 上传之前设置上传参数,
      let filename = new Date().getTime() + '_' + request.name
      let params = {
        filekey: filename
      }
      await getFileUploadToken(params).then(res => {
        let { code, msg } = res.data
        if (code == 200) {
          this.uploadParams.token = res.data.data.token
          this.imgQiniuToken = res.data.data.token
          this.imgQiniuUrlPre = res.data.data.urlPre
          // 七牛response hash key的值自定义，后面如果需要浏览或者下载都需要这个地址，如果key不定义，那么七牛生成的key === hash的值
          this.uploadParams.key = filename
          console.log('uploadParams: ' + this.uploadParams.token)
          // 整个上传肯定是一个组件，所以需要将值反馈给父界面
          this.$emit('completeFun', [request])
        } else {
          this.$Message.error({
            content: msg,
            background: true
          })
        }
      })
    },
    handleAddImgSuccess (request, file, list) {
      console.log(file, list, '上传成功')
      this.addForm.preImg = this.imgQiniuUrlPre + request.key
      // 这里就能拿到七牛返回的response信息（hash, key)然后拼接服务器地址，就可以访问了
      this.imageUrl = this.imgQiniuUrlPre + request.key
      this.$emit('successFun', [file, list, this.imageUrl])
    },
}

3、获取七牛云token后台代码

1）七牛云参数配置

oss:
  qiniu:
    accessKey: ****
    secretKey: ****
    urlpre: https://****.com/
    bucketName: ****

2）QiNiuConfig.java

import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.http.Client;
import com.qiniu.http.Response;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.io.InputStream;
import java.net.URLEncoder;

/**
 * @author：Tseng
 * @description TODO
 * @since: JDK1.8
 * @version: 1.0
 * @date: 2021/7/12 5:43 下午
 * 最后更新日期：
 * 修改人：
 * 复审人：
 * @Copyright © 2019-2021 Tseng
 */
@Component
@ConfigurationProperties(prefix = "oss.qiniu")
public class QiNiuConfig {

    private String accessKey;

    private String secretKey;
    /**
     * 文件存储空间名
     */
    public String bucketName;
    /**
     * 文件外链
     */
    public String urlpre;

    public String getAccessKey() {
        return accessKey;
    }

    public void setAccessKey(String accessKey) {
        this.accessKey = accessKey;
    }

    public String getSecretKey() {
        return secretKey;
    }

    public void setSecretKey(String secretKey) {
        this.secretKey = secretKey;
    }

    public String getBucketName() {
        return bucketName;
    }

    public void setBucketName(String bucketName) {
        this.bucketName = bucketName;
    }

    public String getUrlpre() {
        return urlpre;
    }

    public void setUrlpre(String urlpre) {
        this.urlpre = urlpre;
    }

    private UploadManager uploadManager;
    private BucketManager bucketManager;
    private Configuration c;
    private Client client;
    // 密钥配置
    private Auth auth;

    public Client getClient(){
        if (client==null) {
            client=new Client(getConfiguration());
        }
        return client;
    }

    public BucketManager getBucketManager() {
        if (bucketManager == null) {
            bucketManager = new BucketManager(getAuth(), getConfiguration());
        }
        return bucketManager;
    }

    public UploadManager getUploadManager() {
        if (uploadManager == null) {
            uploadManager = new UploadManager(getConfiguration());
        }
        return uploadManager;
    }

    public Configuration getConfiguration() {
        if (c == null) {
            Zone z = Zone.autoZone();
            c = new Configuration(z);
        }
        return c;
    }

    public Auth getAuth() {
        if (auth == null) {
            auth = Auth.create(getAccessKey(), getSecretKey());
        }
        return auth;
    }
    //简单上传模式的凭证
    public String getUpToken() {
        return getAuth().uploadToken(getBucketName());
    }
    /**
     * 覆盖上传模式的凭证
     */
    public String getUpToken(String fileKey) {
        return getAuth().uploadToken(getBucketName(), fileKey);
    }

    /**
     * 将本地文件上传
     * @param filePath 本地文件路径
     * @param fileKey 上传到七牛后保存的文件路径名称
     * @return
     * @throws IOException
     */
    public String upload(String filePath, String fileKey)  {
        Response res;
        try {
            res = getUploadManager().put(filePath, fileKey, getUpToken(fileKey));
            // 解析上传成功的结果
            DefaultPutRet putRet = new Gson().fromJson(res.bodyString(), DefaultPutRet.class);
            return urlpre + "/" + putRet.key;
        } catch (QiniuException e) {
            res = e.response;
            e.printStackTrace();
            return "上传失败";
        }
    }

    /**
     * 上传二进制数据
     * @param data
     * @param fileKey
     * @return
     * @throws IOException
     */
    public String upload(byte[] data, String fileKey) throws IOException {
        Response res;
        try {
            res = getUploadManager().put(data, fileKey, getUpToken(fileKey));
            // 解析上传成功的结果
            DefaultPutRet putRet = new Gson().fromJson(res.bodyString(), DefaultPutRet.class);
            return urlpre + "/" + putRet.key;
        } catch (QiniuException e) {
            res = e.response;
            e.printStackTrace();
            return "上传失败";
        }
    }

    /**
     * 上传输入流
     * @param inputStream
     * @param fileKey
     * @return
     * @throws IOException
     */
    public String upload(InputStream inputStream, String fileKey) throws IOException {
        Response res;
        try {
            res = getUploadManager().put(inputStream, fileKey, getUpToken(fileKey),null,null);
            // 解析上传成功的结果
            DefaultPutRet putRet = new Gson().fromJson(res.bodyString(), DefaultPutRet.class);
            return urlpre + "/" + putRet.key;
        } catch (QiniuException e) {
            res = e.response;
            e.printStackTrace();
            return "上传失败";
        }
    }

    /**
     * 删除文件
     * @param fileKey
     * @return
     * @throws QiniuException
     */
    public boolean delete(String fileKey) throws QiniuException {
        Response response = bucketManager.delete(this.getBucketName(), fileKey);
        return response.statusCode == 200 ? true:false;
    }

    /**
     * 获取公共空间文件
     * @param fileKey
     * @return
     */
    public String getFile(String fileKey) throws Exception{
        String encodedFileName = URLEncoder.encode(fileKey, "utf-8").replace("+", "%20");
        String url = String.format("%s/%s", urlpre, encodedFileName);
        return url;
    }

    /**
     * 获取私有空间文件
     * @param fileKey
     * @return
     */
    public String getPrivateFile(String fileKey) throws Exception{
        String encodedFileName = URLEncoder.encode(fileKey, "utf-8").replace("+", "%20");
        String url = String.format("%s/%s", urlpre, encodedFileName);
        Auth auth = Auth.create(accessKey, secretKey);
        long expireInSeconds = 3600;//1小时，可以自定义链接过期时间
        String finalUrl = auth.privateDownloadUrl(url, expireInSeconds);
        return finalUrl;
    }

}

3 )  FileUploadTokenController.java

import com.alibaba.fastjson.JSONObject;
import com.vcore.magicshow.admin.config.QiNiuConfig;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

@Slf4j
@RestController
@RequestMapping("fileUploadToken")
@Api(value="fileUploadToken" ,tags = "获取七牛云token")
public class FileUploadTokenController  {

    @Autowired
    private QiNiuConfig qiNiuConfig;

    @ApiOperation(value = "获取七牛云文件上传token", notes = "获取七牛云文件上传token")
    @RequestMapping(value = "getFileUploadToken", method = {RequestMethod.POST})
    public Object getFileUploadToken( @RequestBody JSONObject jsonObject) {
        Map<String, Object> ret = new HashMap<>();
        int code =200;
        try {
            String filekey = jsonObject.get("filekey").toString();
            Map<String, String> res = new HashMap<>();
            res.put("token", qiNiuConfig.getUpToken(filekey));
            res.put("urlPre", qiNiuConfig.urlpre);
            ret.put("data",res);
        } catch (Exception e) {
            log.error("获取七牛云上传token出错", e);
            code = 500;
            ret.put("data",null);
        }
        ret.put("code", code );
        return ret ;
    }
}

4、上传成功案例