angularjs - 如何使用 Angular js 根据上传类型上传任何文件

Question

是否有任何指令或js文件来上传任何格式文件，例如.ppt，.mp4，，txt，.doc ....意味着任何类型。以及如何使用 Angular js 下载这些文件。即使我得到了一些指令，但没有用。所以，我在这里质疑，因为我花了一整天的时间来得到它，但徒劳无功。任何演示都会有很大帮助。这么有可能，帮帮我吧。谢谢你

Answer 1

伙计们，使用 Angular js 上传任何类型的文件非常容易。我在这里发帖是因为我花了将近一天的时间来搜索并获得正确的答案。这是过程。

1. 首先将这两个文件插入到您的index.html中，

   <script src="ng-file-upload.min.js"></script>
   <script src="ng-file-upload-shim.min.js"></script>
   

2. 现在在您的 script.js 中注入(inject)“ngFileUpload”作为依赖项

3. 现在从您要上传文件的位置(即 html 文件中)编写以下代码

   <form  ng-controller="MyCtrl as up" name="up.upload_form" class="form-horizontal form-label-left">
    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Description <span class="required">*</span>
                </label>
                      <div class="col-md-4 col-sm-6 col-xs-12">
       <input 
           type="file" 
           ngf-select 
           ng-model="up.file" 
           name="file" 
           ngf-max-size="20MB" 
           />
   
       <button type="submit" ng-click="up.submit()">submit</button>
       <p>{{up.progress}}</p></div></div>
   </form>
   

4. 在 Controller 写入中，

   ZustShopController.controller('MyCtrl',['Upload','$window',function(Upload,$window){
   var vm = this;
   vm.submit = function(){ //function to call on form submit
   if (vm.upload_form.file.$valid && vm.file) { //check if from is valid
       vm.upload(vm.file); //call upload function
   }
   }
   
   vm.upload = function (file) {
   Upload.upload({
       url: 'http://serveripaddress:portnumber/upload', //webAPI exposed to upload the file
       data:{file:file} //pass file as data, should be user ng-model
   }).then(function (resp) { //upload function returns a promise
       if(resp.data.error_code === 0){ //validate success
           $window.alert('Success ' + resp.config.data.file.name + 'uploaded. Response: ');
       } else {
           $window.alert('an error occured');
       }
   }, function (resp) { //catch error
       console.log('Error status: ' + resp.status);
       $window.alert('Error status: ' + resp.status);
   }, function (evt) { 
       console.log(evt);
       var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
       console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
       vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
   });
   };
   }]);
   

这里的服务器IP地址是您的服务器地址和服务器运行的端口号。

客户端不需要服务/工厂

现在在服务器端包含所有需求，然后添加写入，

     var storage = multer.diskStorage({ //multers disk storage settings
   destination: function (req, file, cb) {
       cb(null, './uploads/');
   },
   filename: function (req, file, cb) {
       var datetimestamp = Date.now();
       cb(null, file.originalname);
   }
   });

    var upload = multer({ //multer settings
               storage: storage
           }).single('file');

       /** API path that will upload the files */
      app.post('/upload', function(req, res) {
   upload(req,res,function(err){
       if(err){
            res.json({error_code:1,err_desc:err});
            return;
       }
        res.json({error_code:0,err_desc:null});
   });
     });

就这么简单。

注意:在服务器端创建一个名为 uploads 的文件夹，其中将存储所有文件。

或者您也可以点击以下链接，我成功地完成了代码，但进行了一些更改。 http://code.ciphertrick.com/2015/12/07/file-upload-with-angularjs-and-nodejs/

谢谢。如果有帮助，请投票。