betway必威亚洲官网Fileinput上传插件使用实例代码,中的异常处理

详解React 16 中的异常处理

本文介绍了webpack实现热更新(实施同步刷新),分享给大家,希望对大家有帮助。

0、效果图

异常处理

解决方案一:

betway必威亚洲官网 1

在 React 15.x 及之前的版本中,组件内的异常有可能会影响到 React
的内部状态,进而导致下一轮渲染时出现未知错误。这些组件内的异常往往也是由应用代码本身抛出,在之前版本的
React
更多的是交托给了开发者处理,而没有提供较好地组件内优雅处理这些异常的方式。在
React 16.x 版本中,引入了所谓 Error Boundary 的概念,从而保证了发生在 UI
层的错误不会连锁导致整个应用程序崩溃;未被任何异常边界捕获的异常可能会导致整个
React
组件树被卸载。所谓的异常边界即指某个能够捕获它的子元素(包括嵌套子元素等)抛出的异常,并且根据用户配置进行优雅降级地显示而不是导致整个组件树崩溃。异常边界能够捕获渲染函数、生命周期回调以及整个组件树的构造函数中抛出的异常。

实现热更新,首先,安装一系列的node命令,如果嫌麻烦,你可以直接看解决方案二,相对来说比较简单。

1、引入js、css(建议css放在html头部,js加载在html底部)

我们可以通过为某个组件添加新的 componentDidCatch(error, info)
生命周期回调来使其变为异常边界:

1、webpack命令安装

<link href="~/Content/fileinput.min.css" rel="external nofollow" rel="stylesheet" />
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/fileinput.js"></script>
<script src="~/scripts/zh.js"></script>
class ErrorBoundary extends React.Component {
 constructor(props) {
super(props);
this.state = { hasError: false };
 }

 componentDidCatch(error, info) {
  // Display fallback UI
this.setState({ hasError: true });
  // You can also log the error to an error reporting service
  logErrorToMyService(error, info);
 }

 render() {
if (this.state.hasError) {
   // You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
  }
return this.props.children;
 }
}
npm install webpack -g 

npm init

npm init -yes //可以创建默认的package.json 

npm install webpack --save-dev 

npm install path fs html-webpack-plugin extract-text-webpack-plugin autoprefixer webpack-dev-server --save-dev

npm install css-loader style-loader --save-dev//样式文件,我们需要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。

2、html

然后我们就可以如常使用该组件:

webpack 使用命令:(知道有这个东西就行,这里不做过多介绍)

<input type="file" id="uploaddoc" name="file" class="file" multiple />//上传按钮 multiple为可多文件上传 
<input type="hidden" id="Doc" name="doc" value="" />//保存文件路径 
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包

webpack --watch //监听变动并自动打包

webpack -p//压缩混淆脚本,这个非常非常重要!

webpack -d//生成map映射文件,告知哪些模块被最终打包到哪里了

3、初始化

componentDidCatch() 方法就好像针对组件的 catch {} 代码块;不过
JavaScript 中的 try/catch 模式更多的是面向命令式代码,而 React
组件本身是声明式模式,因此更适合采用指定渲染对象的模式。需要注意的是仅有类组件可以成为异常边界,在真实的应与开发中我们往往会声明单个异常边界然后在所有可能抛出异常的组件中使用它。另外值得一提的是异常边界并不能捕获其本身的异常,如果异常边界组件本身抛出了异常,那么会冒泡传递到上一层最近的异常边界中。

其中的 -p 是很重要的参数,曾经一个未压缩的 700kb 的文件,压缩后直接降到
180kb (主要是样式这块一句就独占一行脚本,导致未压缩脚本变得很大) 。

$("#uploaddoc").fileinput({ 
    language: 'zh', 
    uploadUrl: '/Form/upload',//后台上传方法 
    allowedFileExtensions: ['doc', 'docx'],//上传文件扩展名 
    shouUpload: false, 
    showRemove: false, 
    browseClass: 'btn btn-danger', 
    maxFileSize: 5000, 
    maxFileNum: 10, 
    allowedPreviewTypes: null, 
    previewFileIconSettings: { 
      'doc': '<i class="fa fa-file-word-o text-muted"></i>' 
    }, 
    previewFileExtSettings: { 
      'doc': function (ext) { 
        return ext.match(/(doc|docx)$/i); 
      } 
    } 
  });

在真实地应用开发中有的开发者也会将崩坏的界面直接展示给开发者,不过譬如在某个聊天界面中,如果在出现异常的情况下仍然直接将界面展示给用户,就有可能导致用户将信息发送给错误的接受者;或者在某些支付应用中导致用户金额显示错误。因此如果我们将应用升级到
React
16.x,我们需要将原本应用中没有被处理地异常统一包裹进异常边界中。譬如某个应用中可能会分为侧边栏、信息面板、会话界面、信息输入等几个不同的模块,我们可以将这些模块包裹进不同的错误边界中;这样如果某个组件发生崩溃,会被其直属的异常边界捕获,从而保证剩余的部分依然处于可用状态。同样的我们也可以在异常边界中添加错误反馈等服务接口以及时反馈生产环境下的异常并且修复他们。完整的应用代码如下所示:

2、webpack 支持es6转码安装

4、回调方法

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
 }

 componentDidCatch(error, errorInfo) {
  // Catch errors in any components below and re-render with error message
this.setState({
   error: error,
   errorInfo: errorInfo
  })
  // You can also log error messages to an error reporting service here
 }

 render() {
if (this.state.errorInfo) {
   // Error path
return (
    <div>
     <h2>Something went wrong.</h2>
     <details style={{ whiteSpace: 'pre-wrap' }}>
      {this.state.error && this.state.error.toString()}
      <br />
      {this.state.errorInfo.componentStack}
     </details>
    </div>
   );
  }
  // Normally, just render children
return this.props.children;
 } 
}

class BuggyCounter extends React.Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
this.setState(({counter}) => ({
   counter: counter + 1
  }));
 }

 render() {
if (this.state.counter === 5) {
   // Simulate a JS error
throw new Error('I crashed!');
  }
return <h1 onClick={this.handleClick}>{this.state.counter}</h1>;
 }
}

function App() {
return (
  <div>
   <p>
    <b>
     This is an example of error boundaries in React 16.
     <br /><br />
     Click on the numbers to increase the counters.
     <br />
     The counter is programmed to throw when it reaches 5. This simulates a JavaScript error in a component.
    </b>
   </p>
   <hr />
   <ErrorBoundary>
    <p>These two counters are inside the same error boundary. If one crashes, the error boundary will replace both of them.</p>
    <BuggyCounter />
    <BuggyCounter />
   </ErrorBoundary>
   <hr />
   <p>These two counters are each inside of their own error boundary. So if one crashes, the other is not affected.</p>
   <ErrorBoundary><BuggyCounter /></ErrorBoundary>
   <ErrorBoundary><BuggyCounter /></ErrorBoundary>
  </div>
 );
}



ReactDOM.render(
 <App />,
 document.getElementById('root')
);
//安装转码规则 
npm install babel-core babel-loader babel-preset-es2015 babel-preset-React babel-preset-stage-0 –save-dev
var List = new Array();//声明保存上传文件路径数组对象 
  //上传 - 删除 
  $('#uploaddoc').on('filesuccessremove', function (event, key) { 
    var abort = true; 
    if (confirm("确定要删除已上传的文件吗?")) { 
      abort = false; 
    } 
    var index1; 
    $.each(List, function (index, item) { 
      if (item.KeyID == key) {//默认fileinput.js的key与KeyID不一致,需要改动源码,详情见下文 
        index1 = index; 
        $.post("/Form/uploaddelete", { key: item.KeyID, path: item.path });//删除以上传到本地的文件 
      } 
    }); 
    List.splice(index1, 1); 
    var path = ""; 
    $.each(List, function (index, item) { 
      path += item.path; 
    }); 
    $("#Doc").val(path);//修改保存的文件路径 
  }); 
  //取消上传事件,左上角的取消按钮 
  $('#uploaddoc').on('filecleared', function (event, files) { 
    $.each(List, function (index, item) { 
      $.post("/Form/uploaddelete", { key: "all", path: item.path }); 
    }); 
    List = new Array();//清空保存的文件路径数组对象,这里是赋值给新的空对象,应该可以优化为删除以保存的所有值 
    $("#Doc").val(""); 
  }); 

  //上传 - 成功 
  $("#uploaddoc").on("fileuploaded", function (event, data, previewId, index) { 
    var form = data.form, files = data.files, extra = data.extra, 
    response = data.response, reader = data.reader; 
    List.push({ path: response.path, KeyID: previewId }) 
    $("#Doc").val($("#Doc").val() + response.path); 
    //$("#Doc").val(List); 
  }); 

以上就是详解React 16
中的异常处理的资料整理,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

3、webpack + es6 + react 安装命令:

betway必威亚洲官网 2

您可能感兴趣的文章:

  • 简单谈谈React中的路由系统
  • 关于react-router的几种配置方式详解
  • React
    子组件向父组件传值的方法
  • React
    Native实现进度条弹框的示例代码
  • ReactNative之键盘Keyboard的弹出与消失示例
  • react-native
    封装选择弹出框示例(试用ios&android)
  • 详解Angular Reactive Form
    表单验证
  • react系列从零开始_简单谈谈react
  • React利用插件和不用插件实现双向绑定的方法详解
npm install react react-dom react-router react-hot-loader css-loader jsx-loader --save-dev 

//react-hot-loader 是一款非常好用的 React 热插拔的加载插件,通过它可以实现修改-运行同步的效果,配合 webpack-dev-server 使用更佳!

5、后台上传方法

附注:

//上传方法  
public JsonResult Upload() 
    { 
      HttpPostedFileBase file = Request.Files["file"]; 
      if (file == null) 
      { 
        return Json(new { error = "上传异常" }); 
      } 
      var ext = Path.GetExtension(file.FileName); 
      var filename = Path.GetFileNameWithoutExtension(file.FileName); 
      var serverfilenname = Guid.NewGuid().ToString("n") + "_" + filename + ext; 
      try 
      { 
        var path = "/File"; 
        var dic = string.Format("{0}/{1}/{2}/{3}", path, DateTime.Today.Year.ToString(), DateTime.Today.Month.ToString(), DateTime.Today.Day.ToString()); 
        if (!Directory.Exists(Server.MapPath(dic))) 
        { 
          Directory.CreateDirectory(Server.MapPath(dic)); 
        } 
        var webpath = string.Format("{0}/{1}", dic, serverfilenname); 
        var serverpath = Path.Combine(Server.MapPath(dic), serverfilenname); 
        file.SaveAs(serverpath); 
        return Json(new { 
          url = "/Form/uploaddelete",//定义要删除的action,没有用到可删掉 
          key = serverfilenname, 
          path = webpath }); 
      } 
      catch (Exception ex) 
      { 
        return Json(new { error = "上传异常" + ex }); 
      } 
    } 
//删除本地文件方法 
public JsonResult UpLoadDelete() 
    { 
      try 
      { 
        var key = Request.Params["key"]; 
        var path = Request.Params["path"]; 
        if (string.IsNullOrEmpty(key) || string.IsNullOrEmpty(path)) 
        { 
          return Json(false, JsonRequestBehavior.DenyGet); 
        } 
        path = Server.MapPath(path); 
        if (System.IO.File.Exists(path)) 
        { 
          System.IO.File.Delete(path); 
          return Json(true, JsonRequestBehavior.DenyGet); 
        } 
        else 
        { 
          return Json(false, JsonRequestBehavior.DenyGet); 
        } 
      } 
      catch (Exception) 
      { 
        return Json(false, JsonRequestBehavior.DenyGet); 
      } 
    } 

css加载不出来的时候或者报错的时候(ERROR Module not found: Error: Cannot
resolve module ‘style’ in D:\workspace\HBuilder
React_Probject\webPack-demo1\webpck\app)

6、缺点

执行这两个命令:

尚未研究预览功能

$ npm i style-loader -D
$ npm i css-loader -D

尚有优化空间

只要你按照命令安装,即可实现,接下来我附加上我的实现代码:需要几个文件:

7、说明

1、package.json文件

代码粘贴后可直接使用,后台框架为.net
mvc5,默认母版页有加载bootstrap样式和js 如无样式请添加对bootstrap的脚本

在package.json文件中为scripts添加,方便使用命令:

引用

最终package.json文件如下

插件api地址: 

 "scripts": {
  "start": "node dev-serve.js"
 },

上网查了好多相关资料
都不完整,最后只有这个api可以看了,最后终于找到左上角关闭按钮的回调事件

最终package.json文件如下:

总结

{
 "name": "yubai",
 "description": "Utility components for react js",
 "version": "1.1.1",
 "keywords": [
  "react-component",
  "react-utils",
  "react utility"
 ],
 "scripts": {
  "start": "node dev-serve.js"
 },
 "src": "src",
 "test": "test",
 "dist": "dist",
 "mainInput": "ReactUtils",
 "mainOutput": "main",
 "dependencies": {
  "async": "^0.9.0",
  "backbone": "^1.1.2",
  "bootstrap": "^3.2.0",
  "es6-promise": "^1.0.0",
  "flux": "^2.0.1",
  "font-awesome": "^4.2.0",
  "humps": "0.0.1",
  "jquery": "^2.1.1",
  "jquery.ui.widget": "^1.10.3",
  "json5": "^0.2.0",
  "less": "^1.7.5",
  "less-loader": "^0.7.7",
  "lodash": "^2.4.1",
  "moment": "^2.8.3",
  "normalizr": "^0.1.2",
  "q": "^1.0.1",
  "react-hot-loader": "^0.4.5",
  "rimraf": "^2.2.8",
  "routes": "^1.2.0",
  "superagent": "^0.18.2",
  "codemirror": "3.20.0"
 },
 "repository": {
  "type": "git",
  "url": "git+ssh://git@github.com/sahusoftcom/react-utils.git"
 },
 "devDependencies": {
  "autoprefixer": "^6.6.1",
  "babel-core": "^6.21.0",
  "babel-loader": "^6.2.10",
  "babel-preset-es2015": "^6.18.0",
  "babel-preset-react": "^6.16.0",
  "css-loader": "^0.6.12",
  "extract-text-webpack-plugin": "^1.0.1",
  "fs": "0.0.1-security",
  "gulp": "^3.8.8",
  "gulp-concat": "^2.4.0",
  "gulp-jshint": "^1.8.4",
  "gulp-rename": "^1.2.0",
  "gulp-sass": "^0.7.3",
  "gulp-uglify": "^1.0.1",
  "gulp-util": "^3.0.1",
  "html-webpack-plugin": "^2.26.0",
  "jshint-loader": "~0.6.0",
  "jsx-loader": "^0.11.2",
  "karma": "~0.10.9",
  "karma-chrome-launcher": "~0.1.2",
  "karma-firefox-launcher": "~0.1.3",
  "karma-jasmine": "~0.1.5",
  "karma-phantomjs-launcher": "~0.1.1",
  "karma-script-launcher": "~0.1.0",
  "karma-webpack-plugin": "~1.0.0",
  "path": "^0.12.7",
  "postcss-loader": "^1.2.1",
  "react": "^15.4.2",
  "react-dom": "^15.4.2",
  "react-hot-loader": "^0.4.5",
  "react-router": "^3.0.0",
  "style-loader": "^0.6.5",
  "url-loader": "~0.5.4",
  "webpack": "^1.14.0",
  "webpack-dev-server": "^1.16.2"
 },
 "bugs": {
  "url": "https://github.com/sahusoftcom/react-utils/issues"
 },
 "homepage": "https://github.com/sahusoftcom/react-utils#readme",
 "main": "app.js",
 "author": "yubai",
 "license": "ISC"
}

以上所述是小编给大家介绍的BootStrap
Fileinput上传插件使用实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

以上代码请注意这里,标红部位

您可能感兴趣的文章:

  • 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
  • bootstrap fileinput
    上传插件的基础使用
  • BootStrap
    fileinput.js文件上传组件实例代码
  • bootstrapfileinput实现文件自动上传
  • JS文件上传神器bootstrap
    fileinput详解
  • Bootstrap中的fileinput
    多图片上传及编辑功能
  • Bootstrap的fileinput插件实现多文件上传的方法

betway必威亚洲官网 3

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图