上传文件，路径为C:\fakepath\的问题(待跟进)

一、遇到的问题

​ 今天在用bootstrap + vue上传本地文件到后台时，发现后台接收的本地文件路径不是真实路径（C:\fakepath\test.txt），使得后台无法通过接收前台的文件路径，对文件进行读取，并保存在数据库中。

ava.io.FileNotFoundException: File 'C:\fakepath\test.txt' does not exist

​ 后来发现，由于**浏览器的安全机制，input file的路径时被fakepath代替，隐藏了真实物理路径。 **

​ 上网寻求解决思路：说改浏览器安全设置的，使用**window.URL.createObjectURL()**的，都尝试了没有一个管用的。我问了一下我的学前端的同学，他建议说前台不返回路径，而是返回本地文件内容给后台，但需要在前台对文件格式进行判断。

​ 想了一下，确实是这么一回事，如果传本地文件路径，后台和客户端不在同一台机器上，如果暴露ip地址，岂不是很危险，这里我想尝试一下hdfs，或者阿里云OSS。

​ 首先我还是先试一下vue可不可行。我前端不太会，研究了一下用vue向后台传送文件内容，突然发现一个帖子，他说vue要想读取本地文件，就必须将本地文件放在vue项目的static下才能读取。帖子在这

​ 那么考虑一下连接阿里云OSS吧，采用直接简单上传的方式，但是经过一整天的研究，除了发现不同的bug之外，无丝毫进展，但还是记录一下，不让感觉怪可惜的。

​ 由于个人前端知识太渣，用的框架是springboot + vue + thymeleaf，导致有些命令在thymeleaf中写vue，常常报错（不能写template，不能独自为vue项目配置路由，好像也不能用export default来进行组件化开发）。待以后认真学了前后端分离之后，再回过头来研究如何通过签名拼配，而不是直接从网页上传文件到oss中。

---------------------------------------------------------分割线（下面为没有结果的示范）---------------------------------------------------

二、实验失败（附上代码）

<!--用cdn源引入ali-oss sdk-->
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

<!--用cdn源引入vue-->
<script src="//unpkg.zhimg.com/vue@latest/dist/vue.min.js"></script>    

<div id="upload">
  <div>视频:</div>
  <div><input type="file" id="uploadImage" @change="toUpload" placeholder=""/></div>
</div>

<script type="text/javascript">

    var app = new Vue({
        el: "#upload",
        data: {
            loading: false,
        },
        methods: {
            toUpload : function() {
                let _this = this;
                _this.loading = true
                var client = new OSS.Wrapper({
                    region: 'oss-cn-*******',
                    accessKeyId: 'LTAI****************',
                    accessKeySecret: 'JWHs****************',
                    bucket: 'wangxiaoxi-****************'
                });
                console.log(client)
                //获取文件信息
                const files = document.getElementById("uploadImage")
                if (files.files) {
                    const fileLen = document.getElementById("uploadImage").files
                    const file = document.getElementById("uploadImage").files[0]
                    console.log(file)
                    let consat = file.name;
                    let name = fileLen[0].name;
                    for (let i = 0; i < fileLen.length; i++) {
                        const file = fileLen[i];
                        client.multipartUpload(name, file).then(res => {
                            _this.loading = false
                            var str = res.res.requestUrls[0]
                            console.log(str.split("?")[0])
                            _this.$emit('childByValue', str.split("?")[0])
                        }).catch((err) => {
                            console.log(err)
                        })
                    }
                }
            }

</script>

三、期间遇到的问题

**【问题1:】 **

• client.put(…).then is not a function 或者 client.multipartUpload(…).then is not a function

解决方法： promise用法需要使用OSS.Wrapper

注意：

• Wrapper是大写的，否则会报OSS.wrapper is not a constructor
• 参考文档

【问题2:】

• Access to XMLHttpRequest at ‘http://wangxiaoxi-20200401.oss-cn-shenzhen.aliyuncs.com/20200401222616.csv’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决方法： 对阿里云oss进行跨域设置

注意：

• 跨域设置不在基础设置中（老版本），而在权限管理中（新版本）
• 参考文档

【问题3:】

• oss设置跨域规则之后一只是403

• OPTIONS http://wangxiaoxi-20200401.oss-cn-shenzhen.aliyuncs.com/20200401222616.csv 403 (Forbidden)

解决方法：发现系统时间不一致(如何同步网络时间，baidu），改了后（我是win7系统），发现还是403，但是语句变了（问题4）

注意：

• 阿里云OSS跨域AJAX上传OPTIONS请求403问题的解决方案
• 阿里云oss上传文件 使用node.js 报403错误

【问题4:】

• Failed to load resource: the server responded with a status of 403 (Forbidden)

解决方法：

• 我暂时没有找到（官网说“4.14.0有bug，升级版本成4.14.1即可“，但是更新cdn源后，发现在浏览器中根本加载不出来，想考虑用本地资源，算了，以后再试吧，赶毕设要紧）

• 403 (Forbidden)主要原因：

  1、网站域名解析到了服务器，但服务器未绑定此域名；
  2、你的网页脚本文件在当前目录下没有执行权限；
  3、在不允许写/创建文件目录中执行了创建/写文件操作；
  4、在一定时间内过多的访问此网站（一般是采集程序），被 防火墙拒绝访问了；
  5、你的IP被列入黑名单；
  6、服务器繁忙，同一IP地址发送请求过多，遭到服务器智能屏蔽；

注意：

• 参考文档

• 访问OSS时出现403状态码的排查方法

• Failed to load resource: the server responded with a status of 403 (Forbidden)

  ​

【问题5:】

• aliyun-oss-sdk-4.14.0.min.js:10 OPTIONS http://wangxiaoxi-20200401.oss-cn-shenzhen.aliyuncs.com/test.txt 403 (Forbidden)

• Access to fetch at ‘http://wangxiaoxi-20200401.oss-cn-shenzhen.aliyuncs.com/test.txt’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

解决方法：

• 和之前出现的异常有点类似，暂时没有找到解决方法

四、参考文档

1、vue前端上传文件到阿里云oss的两种方式，put文件流上传，multipartUpload直接上传

2、vue上传OSS前端实现直传阿里云

3、vue页面使用阿里oss上传功能（一）

4、官方文档