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

本文讲述了在使用Vue和Element-UI上传图片到七牛云时遇到的404错误，强调了配置区域和访问域名的区别。前端需要正确调用后端接口获取uploadToken，并使用正确的上传域名。问题根源在于前端上传图片时，未使用对应存储区域的上传域名导致。

文章目录

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

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

前端调用后端接口获取uploadToken
返回给前端需要的参数
前端通过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("yyyy-MM-dd");
        String dir = sdf.format(new Date());
        //生成密钥和token
        Auth auth = Auth.create(accessKey, secretKey);
        String upToken = auth.uploadToken(bucket);
		
        Map<String, String> respMap = new LinkedHashMap<String, String>();
        //获取的token
        respMap.put("upToken", upToken);
        //自定义的文件目录
        respMap.put("dir", dir);
        //七牛云空间外链域名地址，如 http://xxxxxx.clouddn.com
        respMap.put("path", path);
        //前端上传七牛云域名地址
        respMap.put("host", host);
		//我这是通用返回类封装，根据情况修改
        return CommonResult.success(respMap);
    }

el-upload组件：

<el-upload
  action="dataObj.host"
  :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>

后端具体代码：

<script>
	//参数
	dataObj: {
    	key: '',
     	path: '',
     	dir: '',
     	host: '',
     	token:'',
   },
</script>

<script>
methods: {
  emitInput(val) {
    this.$emit('input', val)
  },
  handleRemove(file, fileList) {
    this.emitInput('');
  },
  handlePreview(file) {
    this.dialogVisible = true;
  },
  beforeUpload(file) {
    console.log("上传之前文件信息；",file)
    let _self = this;
    return new Promise((resolve, reject) => {
      policy().then(response => {
       //这里用日期和随机数进行重命名，根据情况修改
         this.dataObj.key = response.data.dir +"/" + this.dateFormat()+"-" + Number.parseInt(Math.random() * 1000, 10) + file.name;
         this.dataObj.dir = response.data.dir;
         this.dataObj.host = response.data.host;
         this.dataObj.token = response.data.upToken;
         this.dataObj.path = response.data.path;
        resolve(true)
      }).catch(err => {
        reject(false)
      })
    })
  },
  handleUploadSuccess(res, file) {
    console.log("上传成功...")
    this.showFileList = true;
    this.fileList.pop();
    //访问图片，要用外链域名的地址path，不是上传区域服务器的域名host
    let url = this.dataObj.path + '/' + this.dataObj.key;
    this.fileList.push({name: file.name, url: url});
    this.emitInput(this.fileList[0].url);
  }
}
</script>

提醒：Element-UI是默认自动上传的，若不需要，用http-request属性来重写上传方式