栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

使用 axios 上传媒体文件

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用 axios 上传媒体文件

一、FormData

XHR 2 添加了一个新的接口 FormData,通过 FormData 对象里面的键值对可以模拟表单控件异步上传二进制文件。

append() 方法会添加一个新值到 FormData 对象内,若已存在也不会覆盖,可用 getAll() 方法取到指定键的所有值。delete() 方法会从 FormData 对象中删除指定键和它所有对应的值。

示例:

const fd = new FormData()// appendfd.append('age', '24')
fd.append('name', 'Mazey')
fd.append('name', 'Cherrie')console.log(fd.get('name')) // Mazeyconsole.log(fd.getAll('name')) // ["Mazey", "Cherrie"]// deletefd.delete('name')console.log(fd.getAll('name')) // []

也可以指定一个 Blob 或 File 作为数据添加到 FormData 对象中:fd.append('file', Blob Object, File Name) 或 fd.append('portrait', formInput.files[0], 'user.png')。

二、Blob

Blob 对象表示一个不可变、原始数据的类文件对象。通过 URL 对象可以创建一个指向类型化数组的 URL,可以当成一个普通的链接使用,比如读取图片或者视频。

示例:

const blob = new Blob([JSON.stringify({hello: 'Mazey!'})], {type : 'application/json'})const url = URL.createObjectURL(blob)
三、实战:使用 axios 上传一个 WebM 文件

备注:WebM 由 Google 提出,是一个开放、免费的媒体文件格式。

const blob = new Blob(Webm Object, {type: 'video/webm'})const formData = new FormData()
formData.append('file', blob, 'mazey-test.webm')
axios({    method: 'post',    url: '/api/video/upload',    data: formData,    headers: {        'Content-Type': 'multipart/form-data'
    }
})
    .then(        res => {            console.log('上传成功!')
        }
    )
    .catch(        err => {            console.log('上传失败!')
        }
    )



作者:后除
链接:https://www.jianshu.com/p/69a525c10a31


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/246012.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号