使用js获取上传文件的路径?

由于浏览器的安全限制,<input type="file">通过js的onchange事件获取上传文件的路径时,返回的是C:fakepath文件名,隐藏了真实的物理路径,可以使用window.URL.createObjectURL()返回一个Blob对象,Blob对象就是二进制数据,它是一个包含有只读原始数据的类文件对象
组件upload:

clipboard.png

clipboard.png
当点击按钮时触发SendDocument方法

clipboard.png
this.$refs.upload.submit();会触发beforeUpload方法
打印结果如下:

clipboard.png

clipboard.png
就可以把blob对象传给extrinsicFileName(表单里的一个字段)
这样可以把表单的数据提交给后台了

那么重点是,你为什么要获取上传文件的路径?

我是一个初学者,刚刚开始学习做上传文件这个功能,简单以为要把文件路径返回给后台,通过他们去获取上传文件的数据。

那么上传文件功能实际上是不需要获取文件路径的,而是通过二进制流传过去的,上面的blob对象其实就是表示文件的二进制数据,通过文件流的方式传输,在计算机里所有的对象都是通过二进制流传输的。Blob对象是File类型的父类型,就是Flie对象通过slice()读取整个文件的部分数据。File包含name、size、type等属性,Blob有size、type属性。所以上传文件是直接把客户端的文件数据发送到服务端,不是文件路径,而是整个文件的数据,客户端下载服务端的就可以通过服务端的路径找到服务端的文件,服务端是没有办法通过路径访问客户端文件的。
除非是,服务端返回一个路径,比如“c:/aa.txt”,然后客户端收到这个路径,通过代码找到这个文件,之后再把这个aa.txt整个文件数据发送给服务端,其实说到底还是客户端把整个文件数据发送给服务端。

基础没打牢就开始学习框架,我开始怀疑自己是不是走错路线了,不过学习总是一个循序渐进的过程,不可能是直线式的,想和大家多交流,所以以后还请大家多多指教。

<think>我们正在处理用户的问题:如何获取SharePoint文件的服务器相对路径(serverrelativeurl)。根据提供的引用内容,我们可以找到一些相关信息:引用[1]提到:在SharePoint托管的应用程序和默认母版页的页面中,请求摘要(digest)已经存在于ID为“__REQUESTDIGEST”的元素中。虽然这与文件路径无关,但它展示了在SharePoint页面中通过JavaScript获取信息的方法。引用[2]提到了SharePoint迁移工具,但没有直接关于获取服务器相对路径的信息。引用[3]是关于测试RBS安装的,与问题无关。引用[4]提到了一个文件路径的引用问题,其中显示了一个文件路径:[Features\image\GoToTop_normal_icon.png]。这个路径是一个服务器相对路径的例子。但是,这个引用是在报告一个错误,说明文件在数据库中被引用但未在服务器上安装。引用[5]是关于算术编码的,与SharePoint无关。因此,我们主要需要依靠SharePoint的一般知识来回答。在SharePoint中,获取文件的服务器相对路径可以通过多种方式:1.使用RESTAPI2.使用CSOM(客户端对象模型)3.通过用户界面直接查看(但用户可能需要以编程方式获取)由于用户的问题没有指定使用哪种方式,我们将重点放在RESTAPI和CSOM上,因为它们是编程获取的常用方法。###使用RESTAPI获取服务器相对路径SharePointRESTAPI提供了访问文件属性的方法。文件的服务器相对路径文件的一个属性。例如,要获取某个文件库中的文件,我们可以通过文件的绝对URL来请求其属性,其中包括`ServerRelativeUrl`。请求示例:```GEThttps://{site_url}/_api/web/GetFileByServerRelativeUrl('/sites/site_name/library_name/file_name')?$select=ServerRelativeUrl```或者,如果我们知道文件的唯一标识符(如ID),也可以使用:```GEThttps://{site_url}/_api/web/lists/getByTitle('Documents')/items({item_id})?$select=File/ServerRelativeUrl&$expand=File```在返回的数据中,会包含文件的`ServerRelativeUrl`属性。###使用CSOM(C#)在C#中,我们可以使用CSOM来获取文件的服务器相对路径。示例代码:```csharpusing(varcontext=newClientContext("https://{site_url}")){context.Credentials=newSharePointOnlineCredentials(username,securePassword);varfile=context.Web.GetFileByServerRelativeUrl("/sites/site_name/library_name/file_name");context.Load(file,f=>f.ServerRelativeUrl);context.ExecuteQuery();Console.WriteLine(file.ServerRelativeUrl);}```###通过JavaScript(在SharePoint页面中)如果我们在SharePoint页面中嵌入JavaScript,可以使用JSOM或者RESTAPI来获取使用RESTAPI的JavaScript示例(使用jQuery):```javascript$.ajax({url:_spPageContextInfo.webAbsoluteUrl+"/_api/web/getfilebyserverrelativeurl('"+serverRelativeFilePath+"')?$select=ServerRelativeUrl",method:"GET",headers:{"Accept":"application/json;odata=verbose"},success:function(data){varserverRelativeUrl=data.d.ServerRelativeUrl;console.log(serverRelativeUrl);},error:function(error){console.log(JSON.stringify(error));}});```注意:`serverRelativeFilePath`应该是已知的,如果不知道,我们可以通过其他方式先获取文件,例如通过列表项查询。###如何获取当前文件的服务器相对路径?如果我们正在一个SharePoint页面(比如在一个自定义的应用程序页面或者Web部件中)中,并且想要获取当前页面的文件相对路径,我们可以使用:```javascriptvarcurrentFileUrl=_spPageContextInfo.serverRequestPath;```或者,如果我们想要获取当前页面所对应的列表项的文件信息,我们可以使用:```javascriptvarcurrentFile=_spPageContextInfo.serverRequestPath;```但是注意,`_spPageContextInfo`是SharePoint提供的一个全局对象,包含当前页面的上下文信息。###其他方法在SharePoint框架(SPFx)中,我们可以使用`this.context.pageContext`来获取当前页面的信息,包括服务器相对路径。###总结获取文件的服务器相对路径主要依赖于我们已知的信息和使用的环境。在编程访问时,RESTAPI和CSOM是常用的方法。§§相关问题§§1.如何通过SharePointRESTAPI获取文件的其他属性?2.在SharePoint中,如何上传文件获取其服务器相对路径?3.如何使用PowerShell获取SharePoint文件的服务器相对路径?4.在SharePoint框架(SPFx)中如何获取当前文件的服务器相对路径?</think>### 获取SharePoint文件的服务器相对路径方法 在SharePoint中获取文件的服务器相对路径(Server Relative URL)主要有以下三种方法: #### 1. 通过REST API获取(推荐) 使用SharePoint REST API的`File`端点可直接获取文件的`ServerRelativeUrl`属性: ```javascript // 示例:通过文件绝对URL获取相对路径 const fileAbsUrl = "https://contoso.sharepoint.com/sites/site1/doclib/file.docx"; fetch(`${_spPageContextInfo.webAbsoluteUrl}/_api/web/getfilebyserverrelativeurl('${encodeURIComponent(fileAbsUrl)}')?$select=ServerRelativeUrl`, { method: "GET", headers: { "Accept": "application/json;odata=verbose", "X-RequestDigest": $("#__REQUESTDIGEST").val() // 引用[1]的请求摘要获取方式 } }) .then(res => res.json()) .then(data => { console.log("相对路径:", data.d.ServerRelativeUrl); // 输出示例:/sites/site1/doclib/file.docx }); ``` #### 2. 通过CSOM(C#) 使用客户端对象模型获取: ```csharp using (var ctx = new ClientContext("https://contoso.sharepoint.com/sites/site1")) { var file = ctx.Web.GetFileByServerRelativeUrl("/sites/site1/doclib/file.docx"); ctx.Load(file, f => f.ServerRelativeUrl); ctx.ExecuteQuery(); Console.WriteLine(file.ServerRelativeUrl); // /sites/site1/doclib/file.docx } ``` #### 3. 通过PowerShell 使用PnP PowerShell模块: ```powershell Connect-PnPOnline -Url "https://contoso.sharepoint.com/sites/site1" $file = Get-PnPFile -Url "/sites/site1/doclib/file.docx" -AsFile $file.ServerRelativeUrl # 输出相对路径 ``` #### ⚠️ 注意事项 1. **路径格式**:服务器相对路径始终以网站集路径开头(如`/sites/site1/...`),不包含域名 2. **编码处理**:路径中的特殊字符需URL编码(如空格→`%20`) 3. **权限要求**:调用API需当前用户对文件有访问权限 4. **迁移场景**:迁移工具会保留原始相对路径[^2] ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值