React使用axios上传图片时预览待传图、展示后端返回字符串方法

针对你提出的两个问题，可以通过补充组件状态、调用浏览器原生API的方式实现，具体修改如下：

实现思路 #

• 图片预览：选中本地图片文件后，使用URL.createObjectURL()方法将File对象转换为浏览器可识别的临时本地资源地址，存入组件状态后通过<img>标签渲染即可。
• 返回结果展示：在组件状态中新增字段存储接口响应内容，请求成功后将后端返回的字符串更新到该状态字段，在页面对应位置渲染即可。

修改后完整代码 #

import React from 'react'
import axios from 'axios';
 
class FileUpload extends React.Component{
    constructor(){
        super();
        this.state = {
            selectedFile:'',
            previewUrl: '', // 存储预览图片地址
            uploadResult: '' // 存储后端返回结果
        }
 
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    // 组件卸载时释放预览URL占用的内存
    componentWillUnmount() {
        if (this.state.previewUrl) {
            URL.revokeObjectURL(this.state.previewUrl)
        }
    }
 
    handleInputChange(event) {
        const file = event.target.files[0]
        // 选中新文件前先释放旧的预览URL
        if (this.state.previewUrl) {
            URL.revokeObjectURL(this.state.previewUrl)
        }
        this.setState({
            selectedFile: file,
            previewUrl: file ? URL.createObjectURL(file) : '', // 生成新的预览地址
            uploadResult: '' // 选新文件时清空之前的上传结果
        })
    }
 
    submit(){
        if (!this.state.selectedFile) {
            alert('请先选择要上传的图片')
            return
        }
        const data = new FormData() 
        data.append('file', this.state.selectedFile)
        const url = "http://localhost:8000/upload.php";
 
        axios.post(url, data)
        .then(res => {
            // 将后端返回结果存入状态
            this.setState({
                uploadResult: res.data
            })
        })
        .catch(err => {
            this.setState({
                uploadResult: `上传失败：${err.message}`
            })
        })
 
    }
 
    render(){
        return(
            <div>
                <div className="row">
                    <div className="col-md-6 offset-md-3">
                        <br /><br />
                        <h3 className="text-white">React 图片上传示例</h3>
                        <br />
                        <div className="form-row">
                            <div className="form-group col-md-6">
                                <label className="text-white">选择图片 :</label>
                                <input 
                                    type="file" 
                                    className="form-control" 
                                    name="upload_file" 
                                    accept="image/*" // 限制仅能选择图片文件
                                    onChange={this.handleInputChange} 
                                />
                            </div>
                        </div>

                        {/* 图片预览区域 */}
                        {this.state.previewUrl && (
                            <div className="form-row">
                                <div className="form-group col-md-6">
                                    <p className="text-white">图片预览：</p>
                                    <img 
                                        src={this.state.previewUrl} 
                                        alt="待上传预览" 
                                        style={{maxWidth: '100%', maxHeight: '300px'}}
                                    />
                                </div>
                            </div>
                        )}
 
                        <div className="form-row">
                            <div className="col-md-6">
                                <button 
                                    type="button" 
                                    className="btn btn-dark" 
                                    onClick={()=>this.submit()}
                                >
                                    上传图片
                                </button>
                            </div>
                        </div>

                        {/* 后端返回结果展示区域 */}
                        {this.state.uploadResult && (
                            <div className="form-row" style={{marginTop: '20px'}}>
                                <div className="col-md-6">
                                    <p className="text-white">上传结果：</p>
                                    <div className="text-white">{this.state.uploadResult}</div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        )  
    }
}
 
export default FileUpload;

注意事项 #

• URL.createObjectURL()生成的是本地临时地址，仅在当前页面生效，不会上传到服务端，不需要手动拼接后端地址
• 上传FormData格式数据时，不要手动配置Content-Type请求头，浏览器会自动生成带正确边界标识的multipart/form-data头，手动设置会导致后端无法正常解析文件内容
• 每次选中新文件、组件卸载时需要调用URL.revokeObjectURL()释放临时URL占用的内存，避免页面长时间运行出现内存泄漏

内容的提问来源于stack exchange，提问作者user18970300