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

上传文件,路径为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)

注意:

【问题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地址发送请求过多,遭到服务器智能屏蔽;

注意:

【问题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、官方文档

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值