上传 react-native 张图片到 S3

Question

I want to upload image from React-Native(expo) to Nodejs server as an image then post to S3.

FRONTEND

  const [image, setImage] = useState(null);
  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });
    if (!result.canceled) {
      console.log(result)
      setImage(result.assets[0].uri);
    }
  }; 


  if (image){
    try {
      const formdata = new FormData()
      formdata.append('name', 'avatar');
      formdata.append('fileData', {
      uri : image,
      type: 'image',
     });
      let res =  fetch('http://172.20.10.2:4000/upload', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: formdata,
      });
    
    } catch (e) {
      console.error(e);
    }

BACKEND

async function uploadFile(file) {
 
  const params = {
    Bucket:"XXX", // bucket you want to upload to
    Key: "filename",
    Body: file.data,
    ACL: "public-read",
  };
  const data = await client.upload(params).promise();
  return data.Location; // returns the url location
}

app.post("/upload", async (req, res) => {
  console.log(req.body.fileData)

//   const u = ????
//   const fileLocation = await uploadFile(u);
// console.log("-------------------------------")
//   return res.status(200).json({ location: fileLocation });
});

I am getting the filedata on the backend as some weird symbols. How would i use that data and be able to upload it as a file? Thanks

I cannot upload data

Answer 1

A better solution would be to use S3 presigned urls . You could request for a presigned url using lambda or through your nodejs server. To upload the file, you could do a http multipart upload on the returned url.

Here is how you could get a presigned url:

  // Get signed URL from S3
  const s3Params = {
    Bucket: "bucketName",
    "bucketpath/image.jpg",
    Expires: 300, // Defines when the url expires in seconds
    ContentType: "image/jpeg",
  }

  const uploadURL = await s3.getSignedUrlPromise('putObject', s3Params)

This article might also be able to help you implement presigned urls.