Question

我的用户应该可以在我的React APP中上传其徽标，

理想情况下，我想要将文件上传到IE托管它的某个位置，并在此过程中检索它的URL，以便可以将该URL与其他设置一起存储在数据库中！

我为用户放置图像的代码非常简单：

this.state = {  
 files: []
};

<DropZone
    onDrop={(files, acceptedFiles, rejectedFiles) => {
        this.setState({files: [...this.state.files, ...acceptedFiles]});
    }}>
    {uploadedFiles}
    {fileUpload}
</DropZone>

然后在保存设置时，我想调用一个函数，正如我所说，将图像上传到某个地方并返回该URL，这样我就可以使用它来存储在数据库中了。

saveDetails = () => {
    // some code here that takes the this.state.files[0]
    uploads it somewhere then returns the URL.. THEN i call a DB storage function storing that URL to then be accessed elsewhere?!
}

是否有一种常见的简便方法？

谢谢您的帮助！

Answer 1

您要使用axios发布图像数据。使用FileReader读取文件。将其读取为base 64映像并将其发送到服务器。要将文件读取为基础64：-

handleDrop(acceptedFiles){
        const {onError,onChangeAvatar} = this.props;

        const reader = new FileReader();

        reader.onabort = ()=>onError("Profile picture reading is aborted!");
        reader.onerror = ()=>onError("Error with uploaded file. Try again.");

        reader.readAsDataURL(acceptedFiles[0]);

        reader.onload = ()=>{
            const base64Image = reader.result;

            onChangeAvatar(base64Image);


        };
    }

现在，您可以使用axios发布图像了：-

onChangeAvatar (base64Image){
Axios.post("/url/to?upload",base64Image).then(response=>console.log(response))
}

保存文件并从服务器端返回保存的url。

主机图片和使用网址

1 个答案: