七牛云前端（客户端）方式上传上传示例

＆逸

已于 2023-07-13 10:42:52 修改

阅读量1.8k

点赞数 2

文章标签：前端后端 java vue.js 微服务七牛云存储

于 2023-07-13 10:16:22 首次发布

本文链接：https://blog.csdn.net/qq_63076561/article/details/131695106

版权

七牛云前端（客户端）方式上传基本步骤

1.前端请求后端获取上传凭证Token

2.客户端携带Token直接上传文件到七牛云

3.接收返回的url

1、服务器生成上传凭证 Token

OssController

package com.lesson.controller;


import com.lesson.common.utils.R;
import com.qiniu.util.Auth;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author &papillon
 * @version 1.0
 * @description TODO
 * @date 2023-07-12 16:00
 */
@RestController
public class OssController {
    @Value("${qiniu.accessKey}")
    String accessKey;
    @Value("${qiniu.secretKey}")
    String secretKey;
    @Value("${qiniu.bucket}")
    String bucket;

    /**
     * 生成七牛云上传token
     */
    @GetMapping("/oss/policy")
    public R policy() {
        Auth auth = Auth.create(accessKey, secretKey);
        String upToken = auth.uploadToken(bucket);
        return R.ok().put("data",upToken);

    }

}

附上核心代码相关联的代码

application.yml

#七牛对象存储
qiniu:
   # 配置accessKey
   accessKey: 你自己的accessKey
   # 配置secretKey
   secretKey: 你自己的secretKey
   # 配置空间名称
   bucket: 你自己的bucket
   # 配置域名
   domain: 你自己的domain  #小提示：首次注册有一个月的测试域名，不可用于生产环境，但测试够了

accessKey、accessKey获取方式

2、前端获取后端Token

将url地址改为后端生成Token的路径，因为在开发环境封装了基本请求路径（后面有例子index.js），所以不需要写完整路径

policy.js

import http from '@/utils/httpRequest.js'
export function policy() {
   return  new Promise((resolve,reject)=>{
        http({
            url: http.adornUrl("/oss/policy"),
            method: "get",
            params: http.adornParams({})
        }).then(({ data }) => {
            resolve(data);
        })
    });
}

附上核心代码相关联的代码

index.js

/**
 * 开发环境
 */
(function() {
  window.SITE_CONFIG = {};

  // api接口请求地址
  window.SITE_CONFIG["baseUrl"] = "http://localhost:88/api";

  // cdn地址 = 域名 + 版本号
  window.SITE_CONFIG["domain"] = "./"; // 域名
  window.SITE_CONFIG["version"] = ""; // 版本号(年月日时分)
  window.SITE_CONFIG["cdnUrl"] =
    window.SITE_CONFIG.domain + window.SITE_CONFIG.version;
})();

httpRequest.js

import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
import { clearLoginInfo } from '@/utils'

const http = axios.create({
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})

/**
 * 请求拦截
 */
http.interceptors.request.use(config => {
  config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
  return config
}, error => {
  return Promise.reject(error)
})

/**
 * 响应拦截
 */
http.interceptors.response.use(response => {
  if (response.data && response.data.code === 401) { // 401, token失效
    clearLoginInfo()
    router.push({ name: 'login' })
  }
  return response
}, error => {
  return Promise.reject(error)
})

/**
 * 请求地址处理
 * @param {*} actionName action方法名称
 */
http.adornUrl = (actionName) => {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}

/**
 * get请求参数处理
 * @param {*} params 参数对象
 * @param {*} openDefaultParams 是否开启默认参数?
 */
http.adornParams = (params = {}, openDefaultParams = true) => {
  var defaults = {
    't': new Date().getTime()
  }
  return openDefaultParams ? merge(defaults, params) : params
}

/**
 * post请求数据处理
 * @param {*} data 数据对象
 * @param {*} openDefaultData 是否开启默认数据?
 * @param {*} contentType 数据格式
 *  json: 'application/json; charset=utf-8'
 *  form: 'application/x-www-form-urlencoded; charset=utf-8'
 */
http.adornData = (data = {}, openDefaultData = true, contentType = 'json') => {
  var defaults = {
    't': new Date().getTime()
  }
  data = openDefaultData ? merge(defaults, data) : data
  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}

export default http

3、客户端携带Token上传文件（vue2语法 + Element UI 组件）

注意：action="https://upload-z2.qiniup.com" 地址需要对应服务器地区，此处为华南地区，附上其他地区供参考：

存储区域	地域简称	上传域名
华东	z0	服务器端上传：`http(s)://up.qiniup.com`
华东	z0	客户端上传： `http(s)://upload.qiniup.com`
华北	z1	服务器端上传：`http(s)://up-z1.qiniup.com`
华北	z1	客户端上传： `http(s)://upload-z1.qiniup.com`
华南	z2	服务器端上传：`http(s)://up-z2.qiniup.com`
华南	z2	客户端上传： `http(s)://upload-z2.qiniup.com`
北美	na0	服务器端上传：`http(s)://up-na0.qiniup.com`
北美	na0	客户端上传： `http(s)://upload-na0.qiniup.com`
东南亚	as0	服务器端上传：`http(s)://up-as0.qiniup.com`
东南亚	as0	客户端上传： `http(s)://upload-as0.qiniup.com`

singleUpload.vue

注意：url前面一段http://xxxxx.com/需要改为你自己的域名，首次注册有赠送测试域名的，填上即可，代码中有提示

<template>
  <div>
    <el-upload
      action="https://upload-z2.qiniup.com"
      :data="dataObj"
      list-type="picture"
      :multiple="false"
      :show-file-list="showFileList"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过10MB
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="fileList[0].url" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import { policy } from "./policy";
import { getUUID } from "@/utils";

export default {
  name: "singleUpload",
  props: {
    value: String
  },
  computed: {
    imageUrl() {
      return this.value;
    },
    imageName() {
      if (this.value != null && this.value !== "") {
        return this.value.substr(this.value.lastIndexOf("/") + 1);
      } else {
        return null;
      }
    },
    fileList() {
      return [
        {
          name: this.imageName,
          url: this.imageUrl
        }
      ];
    },
    showFileList: {
      get: function() {
        return (
          this.value !== null && this.value !== "" && this.value !== undefined
        );
      },
      set: function(newValue) {}
    }
  },
  data() {
    return {
      dataObj: {
        key: "",
        token: "",
        file: ""
      },
      dialogVisible: false
    };
  },
  methods: {
    emitInput(val) {
      this.$emit("input", val);
    },
    handleRemove(file, fileList) {
      this.emitInput("");
    },
    handlePreview(file) {
      this.dialogVisible = true;
    },
    beforeUpload(file) {
      //七牛云上传示例
      let _self = this;
      return new Promise((resolve, reject) => {
        policy()
          .then(response => {
            //上传的文件名使用uuid
            _self.dataObj.key = getUUID();
            //从服务端获取upToken
            _self.dataObj.token = response.data;
            resolve(true);
          })
          .catch(err => {
            reject(false);
          });
      });
    },
    handleUploadSuccess(res, file) {
      console.log("上传成功...");
      this.showFileList = true;
      this.fileList.pop();
      this.fileList.push({
        name: file.name,
//url前面一段http://xxxxx.com/需要改为你自己的域名，首次注册有赠送测试域名的，填上即可
        url:
          "http://xxxxx.com/" +
          "/" +
          this.dataObj.key.replace("${filename}", file.name)
      });
      this.emitInput(this.fileList[0].url);
    }
  }
};
</script>
<style></style>