利用Antd 的Upload组件上传图片
2018-01-31 09:26
387 查看
1. 在.roadhogrc中添加代理域名 { "entry": "src/index.js", "extraBabelPlugins": [ "transform-runtime", "transform-decorators-legacy", "transform-class-properties", ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }] ], "proxy": { “/lerchantAdmin": { //这个字段(lerchantAdmin)的接口会自动匹配到下面的ip域名上 "target": "http://80.7.28.14", //上传图片的域名 "changeOrigin": true } }, "publicPath":"./", "env": { "development": { "extraBabelPlugins": [ "dva-hmr" ] } }, "ignoreMomentLocale": true, "theme": "./src/theme.js", "hash": true } 2. 添加下载图片 renderUploadView() { const { previewVisible, previewImage, fileList } = this.state; const uploadButton = ( <div> <Icon type="plus" /> <div className="ant-upload-text">Upload</div> </div> ); return ( <div> <Upload action="/lerchantAdmin/merchantImage/uploadImage" // 添加上传图片的路径指定 listType="picture-card" onPreview={this.handlePreview} onChange={this.handleImageChange} > {fileList.length >= 6 ? null : uploadButton} </Upload> <div style={{ color: '#919191' }}>{`已添加照片${this.state.number}/6`}</div> <Modal visible={previewVisible} footer={null} onCancel={this.handleImageCancel}> <img alt="example" style={{ width: '50%' }} src={previewImage} /> </Modal> </div> ); }3.经过上面的配置后,会自动定位到http:80.7.28.14/lerchantAdmin/merchantImage/uploadImage去上传图片
相关文章推荐
- 利用化境上传组件上传图片(二)处理页面(upload.asp)
- jQuery-File-Upload图片上传组件简要使用指南(挥泪共享)
- 利用SmartUpload+servlet上传图片文字,上传显示图片,解决乱码问题
- ajaxupload组件上传图片
- 利用化境上传组件上传图片(一)上传页面
- 利用jspsmartupload组件来上传和下载文件
- 利用jquery.uploadify插件来实现图片上传和预览效果
- 利用fileupload组件实现掌控上传进度的AJAX Upload
- jQuery-File-Upload图片上传组件简要使用指南(挥泪共享)
- Element UI Upload 组件 设置只允许上传单张图片的操作
- 利用Jquery的AjaxUpload组件实现头像异步上传并回显
- 利用Jakarta commons fileupload组件实现多文件上传
- 利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件
- 利用开源组件commons-fileupload上传图片文件(1)
- 利用flex+sevlet+fileupload组件实现文件的上传和下载
- 利用Jakarta commons fileupload组件实现多文件上传
- [JavaWeb]jsp图片ajax异步上传,利用ajaxfileupload
- 利用Jakarta commons fileupload组件实现多文件上传
- 利用ASPUPLOAD,ASPJPEG实现图片上传自动生成缩略图及加上水印
- 利用flex+sevlet+fileupload组件实现文件的上传和下载