Vue+Element-UI上传图片到七牛云踩过的坑——返回 404，报错：Document not found

不是进来找报错原因，看怎么上传图片的，先看上传流程和分清区别：配置区域和访问域名找到域名，再看代码

前端上传图片到七牛云的流程

1. 前端调用后端接口获取uploadToken
2. 返回给前端需要的参数
3. 前端通过Vue+Element-UI上传，只要封装好上传的文件对象和文件名的一些属性成dataObj，然后指定上传路径即可

七牛云地址

说到七牛云地址，真的是一把鼻涕一把泪(;´༎ຶД༎ຶ)

1、常见问题

各位要 先 看返回的上传失败常见状态码，找到原因解决是否是配置的问题
七牛云上传失败常见状态码

接下来就是前端最坑的问题

2、分清区别：配置区域和访问域名

设置没问题了，请求到七牛云一直返回 404，报错：Document not found
我尝试在七牛云打开空间访问日志，到这一步是可以访问的空间的。

搞了N个小时，一直以为是设置或者代码有问题，后来终于想起七牛云创建的空间是有个区域的；

在后端上传图片，是会配置区域服务器的，然后再直接使用该空间的外链域名地址访问七牛云

而在前端，没有配置区域服务器，使用该空间的外链域名地址访问七牛云，自然就一直返回404

终于找到原因了 (;´༎ຶД༎ຶ)

在前端上传图片，每个七牛云存储区域都对应着相应的服务器端\客户端上传域名
去下面官网地址，找到你需要的域名，放到表单的action
七牛云官方提供的存储区域

没了，就这样没了 (￣_￣|||)

代码示例

后端具体代码：

@RestController
@RequestMapping("/qiniu")
public class QiNiuController {
   
	//这里我是在properties文件取值，根据情况修改
    @Value("${qiniu.accessKey}")
    private String accessKey;
    @Value("${qiniu.secretKey}")
    private String secretKey;
    @Value("${qiniu.bucket}")
    private String bucket;
    @Value("${qiniu.path}")
    private String path;
    @Value("${qiniu.host}")
    private String host;

    @GetMapping("/policy")
    public CommonResult policy(){
   
        System.out.println("accessKey = " + accessKey);
        //当天日期作为图片存放的文件名
        SimpleDateFormat sdf = new SimpleDateFormat