js获得相对路径文件,并上传到服务器

如何通过js获得相对路径文件

已知一个相对路径文件,如何使用js将该文件读取为File格式,最后上传到服务器中呢。

1.最简单的解决方案——fetch

  • 代码

    import './index.scss'// js通过相对路径获取文件
    function FetchGetLocalFile() {const fetchLocalFile = (path: string) => {// 使用fetch API加载图片文件fetch(path).then(function (response) {return response.blob() // 获取图片文件的二进制数据}).then(function (blob) {// 获取文件名let temp: any = path?.split('/')let name = temp[temp?.length - 1]// 创建File对象let file = new File([blob], name, { type: blob.type })console.log('通过fetch读取的本地文件', file)}).catch(function (error) {console.log('加载文件失败:', error)})}return (<div><h1 className="h1-color">js通过相对路径获取文件</h1><button onClick={() => fetchLocalFile('/src/components/fetch-get-local-file/luffy.png')}>获取文件</button></div>)
    }export default FetchGetLocalFile
    
    • 结果
    • 在这里插入图片描述

2. File

File() 构造器创建新的 File 对象实例(文件对象)

  • 语法

    const myFile = new File(bits, name[, options]);
    
    • 参数

      • bits

        一个包含ArrayBufferArrayBufferViewBlob,或者 DOMString 对象的 Array — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。

      • name

        表示文件名称,或者文件路径。

      • options 可选

        选项对象,包含文件的可选属性。可用的选项如下:

        • type: 表示将要放到文件中的内容的 MIME 类型。默认值为 ""
        • lastModified: 数值,表示文件最后修改时间的 Unix 时间戳(毫秒)。默认值为 Date.now()
  • 每个File类型对象都有有些只读属性

    • name:本地系统中的文件名
    • size:以字节计的文件大小
    • type:包含文件MIME类型的字符串
    • lastModifiedDate:表示文件的最后修改时间
  • File接口基于Blob,稍后将介绍Blob

    File 接口没有定义任何方法,但是它从 Blob 接口继承了以下方法:

    • Blob.slice
      • Blob.slice([start[, end[, contentType]]])
    • 返回一个新的 Blob 对象,它包含有源 Blob 对象中指定范围内的数据。

3. Blob

binary large object:二进制大对象

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob,继承了 Blob 的功能并将其扩展以支持用户系统上的文件。

  • 打印出的Blob对象:详细说明
    在这里插入图片描述

  • 部分读取使用Blob.slice([start[, end[, contentType]]])

4. fetch

Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应。它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。

  • 用法

    • fetch()接受一个 URL 字符串作为参数,默认向该网址发出 GET 请求,返回一个 Promise 对象。

    • 基本示例

      fetch(url).then((response)=>{}).catch((err)=>{})
      
    • fetch()接收到的response是一个 Stream 对象,因此只能被读取一次,更多用法见Fetch API

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/97695.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ios 运行ipa包 日志查看方式

方法一&#xff1a; 使用ideviceinstaller工具 # 安装ipa命令 brew install ideviceinstaller ideviceinstaller -i xxx.ipa# 查看运行日志 idevicesyslog# idevicesyslog 查找命令 idevicesyslog | grep test -A 3 -B 2 # 输出关键字所在行后3行&#xff0c;前2行) idevic…

解决IDEA中java的system.properties乱码问题

在拉了别人的代码到本地后发现system.properties中中文注释都变成了乱码&#xff0c;故记录下解决步骤&#xff0c;供参考&#xff0c;我的系统是mac系统 1、在IDEA中打开设置&#xff0c;IDEA--->Preferences 2、点击Editor-->File Encodings 3、图中三处选择UTF-8&…

C++day7模板、异常、auto关键字、lambda表达式、数据类型转换、STL、list、文件操作

作业 封装一个学生的类&#xff0c;定义一个学生这样类的vector容器, 里面存放学生对象&#xff08;至少3个&#xff09; 再把该容器中的对象&#xff0c;保存到文件中。 再把这些学生从文件中读取出来&#xff0c;放入另一个容器中并且遍历输出该容器里的学生。 #include …

同步推送?苹果计划本月推出 iOS17和iPadOS17,你的手机支持吗?

据报道&#xff0c;苹果公司计划在本月推出 iOS 17 和 iPadOS 17 正式版更新。与去年不同的是&#xff0c;这次更新将同时发布&#xff0c;而不是分别发布。根据彭博社的一位消息人士马克・古尔曼的说法&#xff0c;苹果公司认为 iOS 17 和 iPadOS 17 的第八个测试版已经非常接…

OpenHarmony 使用 ArkUI Inspector 分析布局

● 摘要&#xff1a;视图的嵌套层次会影响应用的性能&#xff0c;开发者应该移除多余的嵌套层次&#xff0c;缩短组件刷新耗时。本文会介绍如何使用 ArkUI Inspector 工具分析布局&#xff0c;提示应用响应性能。 ● 关键字&#xff1a;列举本文相关的关键字&#xff1a;OpenH…

C语言基础知识理论版(很详细)

文章目录 前述一、数据1.1 数据类型1.2 数据第一种数据&#xff1a;常量第二种数据&#xff1a;变量第三种数据&#xff1a;表达式1、算术运算符及算术表达式2、赋值运算符及赋值表达式3、自增、自减运算符4、逗号运算符及其表达式&#xff08;‘顺序求值’表达式&#xff09;5…

小程序中如何查看会员的余额和变更记录

​通过查看会员的余额和变更记录&#xff0c;可以帮助商家更好地管理会员资金&#xff0c;提供更好的服务和用户体验。下面将介绍小程序中如何查看会员的余额以及余额的变更记录。 1. 找到指定的会员卡。在管理员后台->会员管理处&#xff0c;找到需要查看余额和记录的会员…

职责链设计模式

职责链模式又叫命令链、CoR、Chain of Command、Chain of Responsibility。 该模式允许你将请求沿着处理者链进行发送&#xff0c;使多个对象都可以处理请求&#xff0c;每个对象有权决定处理或传递给下个节点。 客户端&#xff1a;用来定义职责链条。 处理者&#xff1a;声明…

Elasticsearch 中的向量搜索:设计背后的基本原理

作者&#xff1a;ADRIEN GRAND 实现向量数据库有不同的方法&#xff0c;它们有不同的权衡。 在本博客中&#xff0c;你将详细了解如何将向量搜索集成到 Elastisearch 中以及我们所做的权衡。 你有兴趣了解 Elasticsearch 用于向量搜索的特性以及设计是什么样子吗&#xff1f; …

页面页脚部分CSS分享

先看效果&#xff1a; CSS部分&#xff1a;&#xff08;查看更多&#xff09; <style>body {display: grid;grid-template-rows: 1fr 10rem auto;grid-template-areas: "main" "." "footer";overflow-x: hidden;background: #F5F7FA;min…

网络版五子棋C++实现

目录 1.项目介绍 2.开发环境 3.核心技术 4.环境搭建 5.WebSocketpp介绍 5.1WebSocketpp是什么 5.2为什么使用WebSocketpp 5.3原理解析&#xff1a; 5.4WebSocketpp主要特性 6.WebSocketpp使用 7.JsonCpp使用 8.MySQL API 9.项目模块设计以及流程图 10.封装日志宏…

redis 数据结构(二)

整数集合 整数集合是 Set 对象的底层实现之一。当一个 Set 对象只包含整数值元素&#xff0c;并且元素数量不时&#xff0c;就会使用整数集这个数据结构作为底层实现。 整数集合结构设计 整数集合本质上是一块连续内存空间&#xff0c;它的结构定义如下&#xff1a; typed…