Загрузка не работает для загрузки изображения реакции-родной

Question

Я использую react-native-sketch-canvas для панели подписи, а затем сохраняю изображение подписи в хранилище устройства и получаю путь к файлу в ответ.Когда я нажимаю «Сохранить», я делаю запрос на загрузку, чтобы загрузить это сохраненное изображение на сервер узла.Я использовал multer на узле js на стороне.Я использовал приведенный ниже код извлечения на react-native.

var data = new FormData(); 
data.append('file', {   
  uri: filepath, /* /storage/emulated/0/Pictures/RNSketchCanvas/image.png */
  name: 'image.png', 
  type: 'image/png'
});

fetch('http://apiUrl/api/upload',{   
    headers: {    
        'Accept': 'application/json', 
        'Content-Type': 'multipart/form-data'
    },
    method: 'POST', 
    body: data
});

и код на моем узле js (multer) на стороне.

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, __dirname+'/../files/');
  }
});
const storageMulter = multer({ 
  storage: storage,
  fileFilter: function(req, file, cb) {
    cb(null, true);
  }
});
var uploadConfig = storageMulter.single('file');
uploadConfig(req, res, function (err) {
    if (err) {
          handleErrors(res, err)
    } else {
          res.json(req.file.filename);
    }
})

, если я отправлю body = "" , тогда это дает мне ошибку "граница не найдена".Если я отправлю data в тело, это не ударит API.

Пожалуйста, помогите, где я не прав.

Answer 1

Если вы пытаетесь отправить файл, напрямую указав путь, он не будет работать.

Протокол file: // не работает с CORS, поэтому пытаетесь получить доступ к вашему файлу, используя локальныйФайловая система не работает в вашем случае.Вы можете исправить это, отправив свои файлы, загрузив их через FileReader.

Вам потребуется добавить тег input с типом file в ваш HTML-файл

<input type="file" name="file" id= "file_selector">

Несколько небольших изменений в вашем файле javascript

document.getElementById("file_selector").onchange= function(event)
{
    var data = new FormData(); 
    data.append('file', event.target.files[0], 'image');

    fetch('http://apiUrl/api/upload',{   
        headers: {'Accept': 'application/json','Content-Type': 'multipart/form-data'},
        method: 'POST', 
        body: data,
        mode: 'cors'
    }).then(console.log("works!"))
    .catch((err) => console.log(err));
}

Я не пробовал запускать его на вашем сервере, но он работает на моем.