test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 20:09:08 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix：修复图片裁剪在新版依赖下的报错，并默认开启旋转 (#2563)

Browse Source
This commit is contained in:
吴多益 2021-09-15 23:25:09 +08:00 committed by GitHub
parent 300e7c7559
commit a3e39e8744
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/zh-CN/components/form/input-image.md
View File

@ -32,7 +32,7 @@ order: 27
```javascript ```javascript
const express = require('express'); const express = require('express');
const multer = require('multer'); const multer = require('multer');
const upload = multer({ dest: 'uploads/' }); const upload = multer({dest: 'uploads/'});
const app = express(); const app = express();
app.use(express.static('public')); app.use(express.static('public'));
@ -50,9 +50,7 @@ app.post('/uploader', upload.single('file'), function (req, res, next) {
// 配合上面的返回值，将 uploads 目录可读，这样返回的文件才能正常显示 // 配合上面的返回值，将 uploads 目录可读，这样返回的文件才能正常显示
app.get('uploads', express.static('uploads')); app.get('uploads', express.static('uploads'));
app.listen(8080, function () { app.listen(8080, function () {});
});
``` ```
这个接口需要返回图片地址，比如下面的格式 这个接口需要返回图片地址，比如下面的格式
@ -75,7 +73,6 @@ app.listen(8080, function () {
} }
``` ```
## 限制文件类型 ## 限制文件类型
可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx` 可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx`

18
src/renderers/Form/InputImage.tsx
View File

@ -370,7 +370,7 @@ export default class ImageControl extends React.Component<
file: any; file: any;
executor: () => void; executor: () => void;
}> = []; }> = [];
cropper = React.createRef<Cropper>(); cropper: Cropper;
dropzone = React.createRef<any>(); dropzone = React.createRef<any>();
frameImageRef = React.createRef<any>(); frameImageRef = React.createRef<any>();
current: FileValue | FileX | null = null; current: FileValue | FileX | null = null;
@ -512,8 +512,8 @@ export default class ImageControl extends React.Component<
guides: true, guides: true,
dragMode: 'move', dragMode: 'move',
viewMode: 1, viewMode: 1,
rotatable: false, rotatable: true,
scalable: false, scalable: true,
...crop ...crop
}; };
} }
@ -862,7 +862,7 @@ export default class ImageControl extends React.Component<
} }
handleCrop() { handleCrop() {
this.cropper.current!.getCroppedCanvas().toBlob((file: File) => { this.cropper.getCroppedCanvas().toBlob((file: File) => {
this.addFiles([file]); this.addFiles([file]);
this.setState({ this.setState({
cropFile: undefined, cropFile: undefined,
@ -884,7 +884,7 @@ export default class ImageControl extends React.Component<
} }
rotatableCrop() { rotatableCrop() {
this.cropper.current!.rotate(90); this.cropper.rotate(45);
} }
addFiles(files: Array<FileX>) { addFiles(files: Array<FileX>) {
@ -1211,7 +1211,13 @@ export default class ImageControl extends React.Component<
{cropFile ? ( {cropFile ? (
<div className={cx('ImageControl-cropperWrapper')}> <div className={cx('ImageControl-cropperWrapper')}>
<Suspense fallback={<div>...</div>}> <Suspense fallback={<div>...</div>}>
<Cropper {...crop} ref={this.cropper} src={cropFile.preview} /> <Cropper
{...crop}
onInitialized={instance => {
this.cropper = instance;
}}
src={cropFile.preview}
/>
</Suspense> </Suspense>
<div className={cx('ImageControl-croperToolbar')}> <div className={cx('ImageControl-croperToolbar')}>
{crop.rotatable && ( {crop.rotatable && (