react-draft-wysiwyg怎么上传图片

Question

根据官网上的实例代码上传图片，但是上传后后台不能返回数据，应该是这边文件没有上传成功；

请问有哪位大神用过这个上传图片呢？？？求指教

Answer 1

data.appen('file',file), 看看后端接收的name是不是要file

Answer 2

前些日子刚好做这个功能，`_uploadImageCallBack = file => {

    return new Promise(
        (resolve, reject) => {
            const formData = new FormData();
            formData.append('pic-upload', file);
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:27018/upload');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.setRequestHeader('Access-Control-Allow-Headers', 'X-Requested-With');
            xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
            xhr.send(formData);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 || xhr.status < 300 || xhr.status === 304) {
                        let result = JSON.parse(xhr.responseText)
                        resolve({
                            data: {
                                link: result.data.link
                            }
                        });
                    } else {
                        reject(xhr.status)
                    }
                }
            }
        }
    );
}`

//serve端app.js
`app.post('/upload', upload.single('pic-upload'), (req, res) => {

// 没有附带文件
if (!req.file) {
    res.json({
        code: 400,
        message: '上传失败'
    });
    return;
}


// 重命名文件
let oldPath = path.join(__dirname, req.file.path);
let newPath = path.join(__dirname, 'public/uploads/' + req.file.originalname);
fs.rename(oldPath, newPath, (err) => {
    if (err) {
        res.json({
            code: 400,
            message: '上传失败',
            err: err
        });
    } else {
        res.json({
            code: 200,
            message: '上传成功',
            data: {
                link: 'http://localhost:27018/uploads/' + req.file.originalname
            }
        });
    }
});

});`

Answer 3

你看一下你上传图片请求的body里面有没有类似下图里面的东西

如果有,有可能是后端的问题

Answer 4

imageUploadCallBack(file) {
return new Promise(

  (resolve, reject) => {
    let formData = new FormData()
    formData.append('image', file)
    let subsystemTourInfo = JSON.parse(localStorage.getItem('subsystemTourInfo')) || {}
    fetch(`${baseUrl}/store/upload/image`, {
      method: 'POST',
      headers: {
      'store-user-token':subsystemTourInfo.token
      },
      body: formData,
    }).then(res => {
      return res.json()
    }).then(res => {
      if (res.data.errcode !== '20000') {
        message.error('图片上传失败', 2)
        reject(res)
      } else {
        resolve({data: {link: res.data.url}})
      }
      
    }).catch(err => {
      reject(err)
    })
  }
)

}