文件处理：上传本地文件至云端

Input元素

const handleChange = (event) => {
    console.log(event.target)    // <input />
  console.log(event.target.value)    // C:\fakepath\xflow_hjq_test.json
  console.log(event.target.files)    // FileList[{...}]
}
<input type='file' onchange={handleChange}/>

获取文件信息
选择文件后，触发 onchange 事件

event.target.value：string为虚假路径+文件名

• 为什么无法获取完整路径？
  • 浏览器处于安全性考虑，无法获取文件的路径
• 如何获取路径？
  • 修改浏览器设置

event.target.files：FileList ，会有文件信息（为什么是个list？应该可以同时选多个文件）

• File文件属性 MDN
  • name：string，文件名
  • size：number，文件大小，单位byte
  • lastModified：number，最后修改时间的时间戳
  • lastModifiedDate：Date，最后修改时间的Date
  • type：string，文件类型
    

问题：

• 重复上传同一个文件，不触发onchange函数
  • 解决方法：onchange后重置valueevent.target.value = ''

图片上传

File类型数据

url

url可以用于显示本地上传的图片，Base64的字符串。
‘blob:http://localhost:9000/161b1b55-45ed-4e92-ac7c-60e5436c61ff’

File转url

const readImageURL = (file: File) => {
    return new Promise((resolve) => {
        if (URL) {
            resolve(URL.createObjectURL(file));
        } else if (FileReader) {
            const reader = new FileReader();
            reader.onload = function () {
                resolve(reader.result);
            };
            reader.readAsDataURL(file);
        }
    });
};

blob

url转blob

blob 通过oss api可上传

    Axios({
        url: src,
        responseType: "blob",
    }).then((res) => {
        callback(res.data);
    });

oss api
支持Buffer.from 和 blob上传

await client.put(
    objectName,
    // Buffer.from(JSON.stringify(fileContent))
    fileContent
);

json上传

File

file读成object内存

const reader = new FileReader()
reader.readAsText(file)
reader.onload = (e) => {
    let fileContent = null
    try{
        fileContent = JSON.parse(e.target.result)
        callback(fileContent)
    } catch(err) {
        enqueueSnackbar('JSON parsed failed, please check your file\'s syntax!', {
            variant: 'error'
        })
        return
    }
}

Object

Buffer.from(JSON.stringify(fileContent))

Buffer

 await client.put(objectName, Buffer.from(JSON.stringify(fileContent)))