javascript - 使用ng-click在没有表格的情况下上传多张图片

Question

我实际上是在使用这个有效的 multer 代码来上传文件。但我想使用 ng-click() 通过 $http post 从我的 Controller 发送更多内容。带有按钮的简单输入将是最好的。

html 端:

<form method="post" enctype="multipart/form-data" action="/productimage">
      <p>
        <input type="file" id="imgadd" name="upl"/>
      </p>
      <p>
         <input type="submit"/> 
      </p>
</form>

服务器端:

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/products')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '.jpg') //Appending .jpg
  }
})

app.post('/productimage', multer({ storage: storage, limits: { fileSize: 200000} }).single('upl'), function(req,res, error){
    console.log(req.body); //form fields
    /* example output:
    { title: 'abc' }
     */
    console.log(req.file.filename); //form files
    /* example output:
            { fieldname: 'upl',
              originalname: 'grumpy.png',
              encoding: '7bit',
              mimetype: 'image/png',
              destination: './uploads/',
              filename: '436ec561793aa4dc475a88e84776b1b9',
              path: 'uploads/436ec561793aa4dc475a88e84776b1b9',
              size: 277056 }
     */
    res.status(204).end();
});

Answer 1

尝试使用如下指令

.directive('fileModel', ['$parse', function($parse) {
        function fn_link(scope, element, attrs) {
            var onChange = $parse(attrs.fileModel);
            element.on('change', function (event) {
                onChange(scope, { $files: event.target.files });
            });
        };
        return {
            link: fn_link
        }
    }])

然后将 input type=file 替换为

<input type="file" id="fileId" accept="image/*" file-model="myFiles($files)"/>

然后在你的 Controller 中添加这个

var formData = new FormData();
$scope.myFiles = function($files) {
   formData.append('upl', $files[0]);
}

将“upl”替换为您希望在后端使用的名称如果你想添加一些东西，在要发送的 formData 中添加带有键值对的每个值作为

formData.append('name', form.name);
formData.append('title', form.title);

**您的图像将直接附加，但请记住，数据应该附加到您的函数上，该函数由 NG-CLICK 调用 **

现在你的 $http 方法

$http.post('/productimage', formData,{headers:{'Content-Type': undefined}}).then(...)

**提交成功后别忘了删除formData as ** formData.delete('名字');

Node 端

app.post('/productimage', multer({ storage: storage, limits: { fileSize: 200000} }).single('upl'), function(req,res, error){
    console.log(req.body);
/*{title: 'xyz', name:'abc'}
*/ 
    console.log(req.file); 
    res.status(204).end();
});