- 外部リソースをAxiosでロードし
File
オブジェクトに変換する - Data URI schemeを
File
オブジェクトに変換する
uriToFile関数
import axios from 'axios'
function uriToFile(uri, fileName) {
if (!uri) return Promise.resolve(null)
return uri.startsWith('data:')
? convertDataUriToFile(uri, fileName)
: loadUriToFile(uri, fileName)
}
function convertDataUriToFile(dataUri, fileName) {
const byteString = atob(dataUri.split(',')[1])
const mimeType = dataUri.match(/(:)([a-z/]+)(;)/)[2]
const length = byteString.length
const content = new Uint8Array(length)
for (let i = 0; length > i; i++) {
content[i] = byteString.charCodeAt(i)
}
return Promise.resolve(
new File([content], fileName, {
type: mimeType,
})
)
}
async function loadUriToFile(uri, fileName) {
const response = await axios.get(uri, {
responseType: 'blob',
})
return new File([response.data], fileName, {
type: response.data.type,
})
}
使い方
uriToFile('https://example.com/example.png')
.then(file => ...)
uriToFile('data:image/png;base64,iVBORw0KGgoAAA...')
.then(file => ...)