Question

我将react-native-sketch-canvas用于签名板，然后将签名图像保存到设备存储，并得到文件路径作为响应。单击“保存”时，我正在获取请求以将保存的图像上传到节点服务器。我在 node 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
});

并在我的 node 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 =“” ，那么它给了我“找不到边界”错误。如果我将数据发送到正文中，则不会击中api。

请在我错的地方提供帮助。

Answer 1

如果您尝试通过直接指定路径来发送文件，它将无法正常工作。

file：//协议不适用于CORS，因此在这种情况下，尝试使用本地文件系统访问文件不起作用。您可以通过通过FileReader加载文件来发送文件来解决此问题。

您需要在HTML文件中添加一个input类型的file标记

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

我还没有尝试在您的服务器上运行它，但是它可以在我的服务器上运行。

提取无法用于上传本机图像

1 个答案: