Каков наилучший способ загрузить фотографию с телефона на сервер узла

Question

Мне интересно, каков наилучший способ загрузить фотографию с моего телефона (используя реагировать нативно) на сервер узлов.

В настоящее время я кодирую свою фотографию в base64 и сохраняю ее в LONGTEXT

но есть ли более эффективный способ сделать это?

Я использую

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

, чтобы достичь моего API

спасибо

Answer 1

Я бы рекомендовал использовать formdata вместо base64.

Для скорости и эффективности, возможно, стоит рассмотреть вопрос об изменении размера вашего изображения перед передачей и разрешить создание эскиза изображения для просмотра на стороне клиента.

В этом примере я использую Axios, 'response-native-image-picker'',' response-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
    }
}

Answer 2

Multer - это промежуточное программное обеспечение node.js для обработки multipart / form-data, которое в основном используется для загрузки файлов.

Это очень просто, просто скопируйте код в документацию.