鍍金池/ 問答/HTML/ react-draft-wysiwyg怎么上傳圖片

react-draft-wysiwyg怎么上傳圖片

clipboard.png
根據(jù)官網上的實例代碼上傳圖片,但是上傳后后臺不能返回數(shù)據(jù),應該是這邊文件沒有上傳成功;

clipboard.png
請問有哪位大神用過這個上傳圖片呢???求指教

回答
編輯回答
胭脂淚

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

2018年5月31日 20:11
編輯回答
詆毀你

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

}

2017年2月14日 00:23
編輯回答
放開她

你看一下你上傳圖片請求的body里面有沒有類似下圖里面的東西

clipboard.png
如果有,有可能是后端的問題

2018年4月18日 12:27
編輯回答
放開她

前些日子剛好做這個功能,`_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
            }
        });
    }
});

});`

2018年7月25日 18:43