抓取工作不上传图像反应母语

我使用react-native-sketch-canvas的签名板，然后保存签名图像设备存储和获取响应文件的路径。当点击保存，我正在读取请求救了图片上传到节点服务器。我在节点JS侧使用multer。我用低于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);
    }
})

如果我发送的身体=“”，则让我有“未找到”的错误边界。如果我发送数据到身体，它没有击中API。

请帮助我哪里错了。

如果您正试图通过直接指定路径发送文件，它不会工作。

该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));
}

我还没有尝试在服务器上运行它，但它适用于我的。