美文网首页
react-native 上传图片小结

react-native 上传图片小结

作者: 朱传武 | 来源:发表于2021-02-08 16:02 被阅读0次

安装第三方库:

react-native-image-picker

获取图片方法:

export const selectPicture = (coptions) =>
  new Promise((resolve) => {
    const options = {
      title: 'Select Image',
      quality: 0.1,
      maxWidth: 600,
      maxHeight: 600,
      durationLimit: 10,
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    ImagePicker.showImagePicker(coptions ? coptions : options, (response) => {
      console.log('Response = ', response);
      if (response.didCancel) {
        failToast('User cancelled image picker');
        console.log();
      } else if (response.error) {
        failToast('ImagePicker Error: ' + response.error);
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = response;
        resolve(source);
      }
    });
  });

dva里面直接调用获取图片对象:

*selectImage({ payload: {} }, { call, put, select }) {
      const source = yield call(selectPicture);
      loadingToast();
      yield put({ type: 'setImages', payload: source });
      const { data } = yield call(pictureUpload, source);

      yield put({ type: 'setFileRes', payload: data });
      hideToast();
    },

上传:

export async function pictureUpload(imageSource) {
  const formDataParam = {
    uri: imageSource.uri,
    type: 'image/jpeg',
    name: 'photo.jpg',
  };
  return postForm(
    '/api/upload/headimg',
    { file: formDataParam },
    {
      hiddenLoading: true,
    }
  );
}

注意,file参数应该是个对象包含 uri、type、name

相关文章

网友评论

      本文标题:react-native 上传图片小结

      本文链接:https://www.haomeiwen.com/subject/gmxfxltx.html