用户选择一张图片(在这种情况下来自 Facebook,但我不认为这与问题有关)。请求被发送到服务器以获取图像并将其保存在本地。请求以 200 解析。解析后的请求在客户端被拾取,并通过创建一个新的图像使用 JS 将图像动态添加到页面中。
问题:即使在写入过程完成之前请求没有解决,但当客户端尝试加载图像时,它会返回 404。
我已经尝试在客户端上添加一个错误处理程序,如果图像返回 404,它会重新加载图像。这在几百毫秒后起作用。然而还有另一个问题。通常图像只加载了一半,其余的都是黑色的。
当请求解决时,就好像图像尚未完成处理一样。
我不知道是什么导致了这个问题。在操作完成之前,我看不到如何解决请求。
import fs from 'fs';
import request from 'request';
import gm from 'gm';
import createUserImageFolders from './imageHelpers/createUserImageFolders';
import getNextImageNumber from './imageHelpers/getNextImageNumber';
import saveImages from './imageHelpers/saveImages';
export default function uploadFacebookPhoto(req, params) {
return new Promise((resolve, reject) => {
createUserImageFolders(req.session.currentDesignerSessionId);
const userDir = 'static/images/user/' + req.session.currentDesignerSessionId;
const imageNumber = getNextImageNumber(userDir + '/uploads/full');
const filename = `${userDir}/uploads/full/${imageNumber}.jpg`;
const thumbWidth = 100;
// Stream the image from the remote server.
request.head(req.body.photoUrl, (err, response, body) => {
request(req.body.photoUrl).pipe(fs.createWriteStream(filename).on(
'close',
() => {
// Create thumbnail
gm(filename)
.noProfile()
.quality(85)
.resize(thumbWidth)
.write(userDir + `/uploads/thumb/${imageNumber}.jpg`, (error) => {
if (error) {
console.error('Graphics Magic (gm) error ', error);
reject({error: 500});
} else {
resolve(true);
}
});
}
));
});
});
}