文件上传及预览相关问题

最新推荐文章于 2024-05-16 13:27:42 发布

东方孤独

最新推荐文章于 2024-05-16 13:27:42 发布

阅读量609

点赞数

分类专栏：个人总结文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_42606338/article/details/127031087

版权

个人总结专栏收录该内容

18 篇文章 0 订阅

订阅专栏

问题背景：
在上传了文件（图片类）后，需要img图片预览

解决方案：
1.依赖后端的话，可以在上传结束之后请求接口获取文件url给到img来做渲染，此操作需要依赖后端服务
2.前端自解决分又分不同场景
2.1 将上传文件转为base64用于图片的加载，file转base64代码如下

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)  // 此处需特别注意 确保传入参数为file类型 否则会报Failed to execute ‘readAsArrayBuffer’ on ‘FileReader’: parameter 1 is not of type ‘Blob’
        reader.onload = () => resolve(reader.result)
        reader.onerror = error => reject(error)
    })
}