Question

我正在尝试创建一个表单，用户可以选择图像并作为条目的一部分上传。

我上传功能正常。当用户选择图像并按下上传时，它会上传到服务器上的文件夹。

然而，我需要做的是以某种方式获取URL并将其用作表单中的参数。

按钮只需调用上传功能

<button class="btn btn-primary" ng-click="uploadProductPicture();">Upload</button>

Client.Controller方法

// Change user profile picture
    $scope.uploadProductPicture = function () {

        // Clear messages
        $scope.success = $scope.error = null;

        // Start upload
        $scope.uploaderProduct.uploadAll();

   };

当用户上传文件我在哪里获取URL？

添加了服务器逻辑

exports.changeProductPicture = function (req, res) {

        fs.writeFile('./modules/deals/client/img/uploads/' + req.files.file.name, req.files.file.buffer, function (uploadError) {
            if (uploadError) {
                return res.status(400).send({
                    message: 'Error occurred while uploading profile picture'
                });
            } else {

                res.json({ file: req.files.file.name });

                // Set variable to file location

            }
        });

};

路线

  app.route('/api/deals/picture')
  .post(deals.changeProductPicture);

Answer 1

您需要先决定如何为服务器上传的图像文件提供服务。如果您在节点服务器中使用express，则可以使用express.static模块为正常静态图像上传的图像提供服务。

我认为代码是这样的。

在节点

中

var upload_image_dir = './modules/deals/client/img/uploads/';

// route setting
app.use('/upload-images', express.static(upload_image_dir));

// image upload handler
exports.changeProductPicture = function (req, res) {

    fs.writeFile(upload_image_dir + req.files.file.name, req.files.file.buffer, function (uploadError) {
        if (uploadError) {
            return res.status(400).send({
                message: 'Error occurred while uploading profile picture'
            });
        } else {
            res.json({ file: req.files.file.name,
                url_image: upload_image_dir + req.files.file.name
            });
        }
    });
};

现在客户端可以通过提取json响应来使用上传的图像的URL。

我希望这个例子可以给你一些想法。

angular-file-upload - 如何获取上传文件的URL

1 个答案:

在节点