Question

我想知道将手机上的照片（使用本机反应）上传到我的节点服务器的最佳方法是什么。

目前我在base64中编码我的图片并将其存储在LONGTEXT

中

但有更有效的方法吗？

我正在使用

 'Content-Type': 'application/x-www-form-urlencoded'

到达我的API

感谢

Answer 1

Multer是一个node.js中间件，用于处理multipart / form-data，主要用于上传文件。

只需复制粘贴文档中的代码即可。

Answer 2

我建议使用formdata而不是base64。

为了提高速度和效率，可以考虑在运输之前先调整图像大小，然后为客户端浏览创建缩略图图像。

这个例子我使用Axios，'react-native-image-picker'，'react-native-image-resizer'和Redux

<强> Api.js

export const api = axios.create({
    baseURL: server,
    headers: {
        'Cache-Control': 'no-cache'
    },
    timeout: 5000
})

<强> PhotoUpload.js

uploadPicture = (photo) => {

    api.post('/image/'+this.state.position, photo)
    .then(() => {
        this.props.getThumbList()
        .then((response) => {
            this.props.setThumbSource(response.payload.data)
            this.setState({thumbUri: {uri: this.props.thumbSource[this.state.position]}})
        })
        .catch((error) => {
            console.log(this.props.errorText)
        })
    })
    .catch((error) => {
        console.log(this.props.errorText)
    })
}

openImagePicker = () => {

    // get image from image picker
    ImagePicker.showImagePicker(this.options, async response => {

        this.setState({
            originUri: response.uri
        })

        if (response.didCancel) {
            console.log('User cancelled image picker')
            return
        } else if (response.error) {
            console.log('ImagePicker Error: ', response.error)
            return
        } else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton)
            return
        }

        //Post the photo with position which it was selected
        const photo = new FormData();
        // data.append('authToken', 'secret');
        photo.append('photo', {
            uri: this.state.originUri,
            type: 'image/jpeg',
            name: 'p-'+this.state.position+'.jpg'
        });

        let { height, width, quality, format, originUri } = this.state

        // Resize and post the thumb
        const resizedImageUri = await ImageResizer.createResizedImage(
            originUri,
            height,
            width,
            format,
            quality
        ).then(({uri}) => {
            photo.append('thumb', {
                uri: uri,
                type: 'image/jpeg',
                name: 't-'+this.state.position+'.jpg'
            });
            this.uploadPicture(photo);
        })
    })
}

<强> Redux.js

export const GET_THUMB_LIST = 'GET_THUMB_LIST';
export const GET_THUMB_LIST_SUCCESS = 'GET_THUMB_LIST_SUCCESS';
export const GET_THUMB_LIST_FAIL = 'GET_THUMB_LIST_FAIL';
export const SET_THUMB_SOURCE = 'SET_THUMB_SOURCE';
export const SET_THUMB_SOURCE_FAIL = 'SET_THUMB_SOURCE_FAIL';

export function getThumbList() {
    return {
        type: GET_THUMB_LIST,
        payload: {
            request: {
                method: 'GET',
                url:'/thumbs'
            }
        }
    };
}



   export function setThumbSource(list) {
        return {
            type: SET_THUMB_SOURCE,
            payload: list
        };
    }

export default function reducer(state = {}, action) {
    switch (action.type) {
    case GET_THUMB_LIST_SUCCESS:
        // console.log(action.payload.data)
        return { 
            ...state,
            thumbList: action.payload.data
        }
    case GET_THUMB_LIST_FAIL:
        return {
            ...state,
            errorText: "Cannot get image list"
        }
    case SET_THUMB_SOURCE:
        return {
            ...state,
            thumbSource: action.payload
        }
    case SET_THUMB_SOURCE_FAIL:
        return {
            ...state,
            errorText: "Set thumb uri failed"
        }
    default:
      return state
    }
}

将照片从手机上传到节点服务器的最佳方法是什么？

2 个答案: