antd upload组件自定义上传行为

自定义上传行为,不到服务器,直接浏览器本地获取图片 base 64 进行操作

const customRequest = (options) => {
        const {onSuccess, onError, file, onProgress} = options

        const reader = new FileReader()
        reader.readAsDataURL(file)

        reader.onload = (file) => {
            setFileList([{
                uid: '-1',
                name: 'image.png',
                status: 'done',
                url: file.target.result,
            }])


            let posterTemplateData = JSON.parse(JSON.stringify(_state.posterTemplateData)) as TypeMaterialData
            posterTemplateData.imgSlot[0].src = file.target.result

            _setState(prevState => ({
                ...prevState,
                posterTemplateData,
            }))


        }
    }
<Upload
                  action=""
                  listType="picture-card"
                  fileList={fileList}
                  customRequest={customRequest}
                  onChange={onChange}
                  onPreview={onPreview}
                  multiple={false}
>
                 {fileList.length < 1 && '+ Upload'}
</Upload>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容