axios文件上传慢 上传文件到oss

8，使用oss实现文件上传

• 1、文件上传（使用场景）
• 2、环境准备
• 3、外部sdk引入

• 3.1、阿里云配置

• 5.1、设置前后台跨域
• 5.2、配置阿里云主帐号，子账号。组

• 3.2、sdk引入

• 4、其他后台代码
• 5、前端vue项目的修改
• 6、实现文件上传

1、文件上传（使用场景）

项目中，文件上传可以放在静态资源服务器nginx里，也可以开通阿里云oss实现文件上传。操作也较为简单。阿里云oss文件上传可以实现图片。音频，视频上传删除等操作。

2、环境准备

1、idea mall后台项目
2、idea mall前台项目
3、linux下有外网的阿里云服务器
4、maven，npm
5、jdk1.8

3、外部sdk引入

3.1、阿里云配置

1、登录阿里云官网打开控制台

2、找到左边这个按钮

3、使用前现在搜索框搜索 -》试用 -》oss

找到oss点击试用一个月

4、返回到控制台。点击oss对象存储

弹出的选项选择不开通

下面都不变点击确定，创建自己的第一个bucket

5、bucket设置

点击刚才创建好的bucket

点两下这个子标签到这里

5.1、设置前后台跨域

5.2、配置阿里云主帐号，子账号。组

这里创建的是主帐号。。accesskeyId和accessSecret

可以不创建。全局的。子账号的创建

1、搜索ram

2、进入ram访问控制设置

3、创建用户组。用户组授权

显示名称尽量填写自己能记住的。方便阿里云工作人员查看后台日志创建好以后添加权限

选择添加自定义策略。名字随意

点击这

点击用户组-》点击权限管理

配置上图第一个的权限脚本。。。第二个是我创建的匹配全部不用管。。。第一个是针对性配置脚本：

{
    "Version": "1",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "oss:ListObjects"
            ],
            "Resource": [
                "acs:oss:*:*:macro-ljs" //这里改成你自己的bucket
            ],
            "Condition": {
                "StringEquals": {
                    "oss:Prefix": [
                        "Development/*"  //这里改成你bucket下文件夹名称
                    ]
                }
            }
        },
        {
            "Effect": "Allow",
            "Action": [
                "oss:GetObject",
                "oss:PutObject",
                "oss:GetObjectAcl"
            ],
            "Resource": [
                "acs:oss:*:*:macro-ljs/Development/*"   //这里改成你自己的bucket+你bucket下的文件夹名称
            ],
            "Condition": {}
        }
    ]
}

4、创建子帐号

勾选编程访问

创建好以后。添加到用户组。将继承刚才用户组的配置

#5、进行子账户accesskeyId和accessscret的配置

#6、会提示是否excel保存accesskey，选择保存。。。csv文件

这两个码就是操作你之后oss文件上传的关键参数

3.2、sdk引入

OssServiceImpl

package com.macro.mall.service.impl;

import cn.hutool.json.JSONUtil;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import com.macro.mall.dto.OssCallbackParam;
import com.macro.mall.dto.OssCallbackResult;
import com.macro.mall.dto.OssPolicyResult;
import com.macro.mall.service.OssService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import javax.servlet.http.HttpServletRequest;
import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * oss上传管理Service实现类
 * Created by macro on 2018/5/17.
 */
@Service
public class OssServiceImpl implements OssService {

	private static final Logger LOGGER = LoggerFactory.getLogger(OssServiceImpl.class);
	@Value("${aliyun.oss.policy.expire}")
	private int ALIYUN_OSS_EXPIRE;
	@Value("${aliyun.oss.maxSize}")
	private int ALIYUN_OSS_MAX_SIZE;
	@Value("${aliyun.oss.callback}")
	private String ALIYUN_OSS_CALLBACK;
	@Value("${aliyun.oss.bucketName}")
	private String ALIYUN_OSS_BUCKET_NAME;
	@Value("${aliyun.oss.endpoint}")
	private String ALIYUN_OSS_ENDPOINT;
	@Value("${aliyun.oss.dir.prefix}")
	private String ALIYUN_OSS_DIR_PREFIX;

	@Autowired
	private OSSClient ossClient;

	/**
	 * 签名生成
	 */
	@Override
	public OssPolicyResult policy() {
		OssPolicyResult result = new OssPolicyResult();
		// 存储目录
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
		String dir = ALIYUN_OSS_DIR_PREFIX+sdf.format(new Date());
		// 签名有效期
		long expireEndTime = System.currentTimeMillis() + ALIYUN_OSS_EXPIRE * 1000;
		Date expiration = new Date(expireEndTime);
		// 文件大小
		long maxSize = ALIYUN_OSS_MAX_SIZE * 1024 * 1024;
		// 回调
		OssCallbackParam callback = new OssCallbackParam();
		callback.setCallbackUrl(ALIYUN_OSS_CALLBACK);
		callback.setCallbackBody("filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");
		callback.setCallbackBodyType("application/x-www-form-urlencoded");
		// 提交节点
		String action = "http://" + ALIYUN_OSS_BUCKET_NAME + "." + ALIYUN_OSS_ENDPOINT;
		try {
			PolicyConditions policyConds = new PolicyConditions();
			policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, maxSize);
			policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
			String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
			byte[] binaryData = postPolicy.getBytes("utf-8");
			String policy = BinaryUtil.toBase64String(binaryData);
			String signature = ossClient.calculatePostSignature(postPolicy);
			String callbackData = BinaryUtil.toBase64String(JSONUtil.parse(callback).toString().getBytes("utf-8"));
			// 返回结果
			result.setAccessKeyId(ossClient.getCredentialsProvider().getCredentials().getAccessKeyId());
			result.setPolicy(policy);
			result.setSignature(signature);
			result.setDir(dir);
			result.setCallback(callbackData);
			result.setHost(action);
		} catch (Exception e) {
			LOGGER.error("签名生成失败", e);
		}
		return result;
	}

	@Override
	public OssCallbackResult callback(HttpServletRequest request) {
		OssCallbackResult result= new OssCallbackResult();
		String filename = request.getParameter("filename");
		filename = "http://".concat(ALIYUN_OSS_BUCKET_NAME).concat(".").concat(ALIYUN_OSS_ENDPOINT).concat("/").concat(filename);
		result.setFilename(filename);
		result.setSize(request.getParameter("size"));
		result.setMimeType(request.getParameter("mimeType"));
		result.setWidth(request.getParameter("width"));
		result.setHeight(request.getParameter("height"));
		return result;
	}

}

OssService

package com.macro.mall.service;

import com.macro.mall.dto.OssCallbackResult;
import com.macro.mall.dto.OssPolicyResult;

import javax.servlet.http.HttpServletRequest;

/**
 * oss上传管理Service
 * Created by macro on 2018/5/17.
 */
public interface OssService {
    /**
     * oss上传策略生成
     */
    OssPolicyResult policy();
    /**
     * oss上传成功回调
     */
    OssCallbackResult callback(HttpServletRequest request);
}

OssController

package com.macro.mall.controller;


import com.macro.mall.common.api.CommonResult;
import com.macro.mall.dto.OssCallbackResult;
import com.macro.mall.dto.OssPolicyResult;
import com.macro.mall.service.OssService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;

/**
 * Oss相关操作接口
 * Created by macro on 2018/4/26.
 */
@Controller
@Api(tags = "OssController", description = "Oss管理")
@RequestMapping("/aliyun/oss")
public class OssController {
    @Autowired
    private OssService ossService;

    @ApiOperation(value = "oss上传签名生成")
    @RequestMapping(value = "/policy", method = RequestMethod.GET)
    @ResponseBody
    public CommonResult<OssPolicyResult> policy() {
        OssPolicyResult result = ossService.policy();
        return CommonResult.success(result);
    }

    @ApiOperation(value = "oss上传成功回调")
    @RequestMapping(value = "callback", method = RequestMethod.POST)
    @ResponseBody
    public CommonResult<OssCallbackResult> callback(HttpServletRequest request) {
        OssCallbackResult ossCallbackResult = ossService.callback(request);
        return CommonResult.success(ossCallbackResult);
    }

}

4、其他后台代码

pom.xml

<properties>
    <aliyun-oss.version>2.5.0</aliyun-oss.version>
 </properties>

<!-- 阿里云OSS -->
            <dependency>
                <groupId>com.aliyun.oss</groupId>
                <artifactId>aliyun-sdk-oss</artifactId>
                <version>${aliyun-oss.version}</version>
            </dependency>

application.yml

aliyun:
  oss:
    endpoint: oss-cn-shenzhen.aliyuncs.com # oss对外服务的访问域名
    accessKeyId: xxxxxxxxxxxxx # 访问身份验证中用到用户标识
    accessKeySecret: xxxxxxxxxxxxxx # 用户用于加密签名字符串和oss用来验证签名字符串的密钥
    bucketName: macro-ljs # oss的存储空间
    policy:
      expire: 300 # 签名有效期(S)
    maxSize: 10 # 上传文件大小(M)
    callback: http://xxxxxx:8080/aliyun/oss/callback # 文件上传成功后的回调地址
    dir:
      prefix: Development/ # 上传文件夹路径前缀

callback一定要配置可以回调的外网地址
可以把项目部署到阿里云服务器上
其中bucketName + ‘.’+endpoint 构成你的oss外网访问域名。。。host

5、前端vue项目的修改

前端mall-admin-web项目就是将所有host url地址改成你自己的。

然后 npm run dev启动前端项目

6、实现文件上传

到这个页面点击上传按钮

点击上传按钮他会调用两个接口

然后系统回调你的endpoint

204代表成功

最后点保存按钮

添加品牌接口，触发数据库新增一条数据

logo字段则为你oss存储照片的位置。。

回到oss对象存储服务器你可以看到刚才保存的图片