醉丶春风的Blog

state

this.state = {
    file: {
        files: [],
        multiple: true,
    }
}

图片选择器 imagePick

<List renderHeader={() => '图片'}>
    <ImagePicker
        files={this.state.file.files}
        onChange={this.onImageFileChange}
        onImageClick={(index, fs) => console.log(index, fs)}
        selectable={this.state.file.files.length < 10}
        multiple={this.state.file.multiple}
        />
</List>

onImageFileChange

选择图片后保存图片到state

onImageFileChange = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
        file: {
            files,
            multiple: this.state.file.multiple,
        }
    });
    console.log(this.state.file);
};

onUpload

上传图片时触发的事件

这里我们先创建一个formData对象, 然后将图片添加进去就可以了,

需要注意的时formData对象不能直接使用console.log打印, 需要使用formData对象提供的方法get或者是getAll来获取属性

如果需要追加其他参数, 同样使用formData.append来添加, 如 formData.append('id', 1);, 对于PHP语言, 后台使用post来接收该参数即可, 上传的文件会被放在$_FILES中

onUpload = () => {
    let formData = new FormData();
    console.log(this.state.file.files);
    for (let i = 0; i < this.state.file.files.length; i++) {
        // antd mobile 把 File 对象放在了 .file中
        let file = this.state.file.files[i].file;
        formData.append('imageFile[]', file);
    }
    return formData;
};

axios发送post请求上传图片

需要注意的是此处的formData就是我们创建的formData, 不需要进行二次处理, 也不需要使用qs.stringify(formData), 这样是错误的

同时还应注意选择的图片大小, 如果超出了后台限制的图片大小, 可能会没有响应, 我就是进入了这个坑, 上传时选图片都是10几兆的大小, 导致后台没有响应, 一度让我束手无策

此处不需要主要设置header content-type, 会自动添加 Content-Type: multipart/form-data;

axios.post(url, formData).then().catch();