Question

我实际上是使用这个工作的multer代码来上传文件。但我想使用ng-click（）通过$ http post从我的控制器发送更多内容。带按钮的简单输入将是最好的。

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)"/>

然后在您的控制器中添加此

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

将“upl”替换为您希望在后端使用的名称 如果您想添加内容，请使用键和＆amp;添加每个值formData中的值对发送 如

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

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

现在你的$ http方法

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

**成功提交后别忘了将formData删除为** formData.delete（ '姓名'）;

节点侧

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

multer使用ng-click上传没有表单的图像

1 个答案: