xml地图|网站地图|网站标签 [设为首页] [加入收藏]

可多张上传,nodejs实现图片上传功能

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:107 发布时间:2019-08-21
摘要:此地处理了下图片,在名字上加了序号,因为在ios上每回选拔的图片名字都叫image,查找了数不胜数素材,说是safari的bug,前面版本才会化解,一时半刻只好以这种办法化解了。循环是上传

此地处理了下图片,在名字上加了序号,因为在ios上每回选拔的图片名字都叫image,查找了数不胜数素材,说是safari的bug,前面版本才会化解,一时半刻只好以这种办法化解了。循环是上传多张图纸

你恐怕感兴趣的稿子:

  • angularjs客商端完毕收缩图片文件并上传实例
  • 经过AngularJS达成图片上传及缩略图展现示例
  • Angular下H5上传图片的章程(可多张上传)
  • AngularJs上传前预览图片的实例代码
  • angularjs达成多张图片上传并预览作用
  • angularjs点击图片放大实现上传图片预览
  • Angularjs上传图片实例详解
  • Angularjs达成上传图片预览功用
  • AngularJS达成图片上传和预览作用的不二法门深入分析
  • Angular4实现图片上传预览路径不安全的主题材料解决

•在对应的html中引进文件路线:<script src="lib/ng-file-upload/ng-file-upload.min.js"></script>

2.劳务 上传文件前预览并裁减图片效用

nodejs 后台代码

•上传图片需求引进插件ngFileUpload,使用bower安装方法: bower install ng-file-upload --save,安装后须求在命名app的名字js文件中注入,如下所示:

这段日子做的类型中用到了angular下上传图片功用,在做的历程中相见了过多难题,最终都足以解决

 以上正是本文的全体内容,希望对大家的求学抱有扶助,也盼望我们多多帮助脚本之家。

在http伏乞如下:

this.FormdataPost = function(pathUrl, formId, formData, files) {
    var fd = new FormData();
    fd.append('formId', formId);
    if(files && angular.isArray(files)) {
      files.forEach(function(item) {
        fd.append('file', item, item.name);
      });
    }
    fd.append('formData', angular.toJson(formData, true));
    var httpConfig = {
      headers: {
        'Authorization': 'Bearer '   this.token,
        'Content-Type': undefined
      },
      transformRequest: angular.identity
    };
    return $http.post(rootUrl   pathUrl, fd, httpConfig).then(function(data) {
      return data;
    }).catch(function(error) {
      $rootScope.interfaceName = pathUrl;
      $rootScope.setNewWortStatus({
        status: error.status,
        errInfo: error.data && error.data.statusInfo || ''
      });
      return error;
    });
  }

angular2前台代码

 //上传单个文件
    function uploadFiles(file, errFiles) {
      vm.imgInfo = file;
      console.log(file);
      if (file) {
        vm.img = file.name;//测试使用
        //Service.upload('','',{file:file})//开发使用
      }
    }

1.ng-file-select,指令angular是没此功能的,其实也是转化成了change事件,没有多少说,直接上代码

 //上传图片
 /*
 *   let data = {
 *    size: '125422',
 *    type: 'image/jpeg',
 *    name: 'test.jpg',
 *    url: base64
 *   };
 *获取图片的base64码可以通过FileReader获取
 */

 uploadImage(data) {
  return new Promise((resolve, reject) => {
   let headers = new Headers({
    'Content-Type': 'application/x-www-form-urlencoded'
   });
   let options = new RequestOptions({
    headers: headers
   });
   this.http.post("http://localhost:4444/upload", this.toQueryString(data),options)
    .map(res => res.json())
    .subscribe(data => { resolve(data), error => { reject(error) } })
  })
 }


// JSON参数序列化
  private toQueryString(obj) {
   let result = [];
   for (let key in obj) {
    key = encodeURIComponent(key);
    let values = obj[key];
    if (values && values.constructor == Array) {
     let queryValues = [];
     for (let i = 0, len = values.length, value; i < len; i  ) {
      value = values[i];
      queryValues.push(this.toQueryPair(key, value));
     }
     result = result.concat(queryValues);
    } else {
     result.push(this.toQueryPair(key, values));
    }
  }
   return result.join('&');
  }
  private toQueryPair(key, value) {
   if (typeof value == 'undefined') {
    return key;
   }
   return key   '='   encodeURIComponent(value === null ? '' : String(value));
  } 
<div class="editHeader_div" ngf-select="setStore.uploadFiles($file, $invalidFiles)">
        <img class="editStoreImg" ng-src="img/{{setStore.img}}">
        <p>更改头像</p>
 </div>

3.controller代码

在采纳angular2举行图纸上传的时候,碰着了美妙绝伦标主题素材。在多番尝试之后最终马到成功上传图片,上面将本身的法子分享给大家:

 //文件上传预设配置
      Upload.setDefaults({
        ngfAccept: "'.jpg,.png,.gif,.jpeg'",
        ngfDropDisabled: 'true',
        ngfPattern: '.jpg,.png,.gif,.jpeg',
        ngfMaxSize: '2MB'
      });
 //上传文件
      function upload(ctrl, name, param) {
        var deferred = $q.defer(),
          interfaceName = ctrl   '/'   name,
          backendDetail = getBackendDetail(interfaceName);
        //上传文件到服务器
        Upload.upload({
          url: backend.url   ':'   backendDetail.port   '/'   backendDetail.service   '/'   interfaceName,
          data: param || {}
        }).then(function(data) {
          //service返回数据
          var result = data.data;
          //200代表接口调用成功
          if (data.status === 200) {
            //数据库返回错误信息
            if (result && serviceErrors[result.returnCode]) {
              deferred.reject('Error Services');
              swal(result.message, '错误状态码:'   result.returnCode, 'error');
            } else if (!result.dataInfo) {
              deferred.reject('Error Image');
              swal('图片上传失败', '请检查图片属性', 'error');
            } else {
              deferred.resolve(result);
            }
          } else {
            deferred.reject('Error Services');
            swal('提交操作失败', '错误状态码:'   data.status, 'error');
          }
        }, function(error) {
          deferred.reject('Error Services');
          swal('提交操作失败', '错误状态码:'   error.status, 'error');
        });
        return deferred.promise;
      }

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:可多张上传,nodejs实现图片上传功能

关键词: 68399皇家赌场

最火资讯