9. 自定义图片大小

leancloud 使用了 七牛云提供的图片处理api
只要在生成的 url 后面加上如下图所示的后缀就能对图片进行裁剪

因此我们只需要添加2个 input 输入框，监听输入，同时修改 url 后缀即可

注意下面的代码中使用了 mobx-react 提供的 useLocalStore 创建组件内局部状态

import { observer, useLocalStore } from 'mobx-react'
// ...
const Uploader = observer(() => {
  const { ImageStore } = useStore()
  const resizeUrlRef = useRef() as MutableRefObject<HTMLInputElement>
  const widthRef = useRef() as MutableRefObject<HTMLInputElement>
  const heightRef = useRef() as MutableRefObject<HTMLInputElement>
  const store = useLocalStore(() => ({
    width: '',
    setWidth() {
      store.width = widthRef.current.value
    },
    get widthStr() {
      return store.width ? `/w/${store.width}` : ''
    },
    height: '',
    setHeight() {
      store.height = heightRef.current.value
    },
    get heightStr() {
      return store.height ? `/h/${store.height}` : ''
    },
    get fullStr() {
      return (
        ImageStore.serverFile.attributes.url.attributes.url +
        '?imageView2/0' +
        store.widthStr +
        store.heightStr
      )
    },
  }))
  // ...
  return (
    <>
      {/* ... */}
      <div>
        {ImageStore.serverFile ? (
          <Result>
            <dl>
              <dt>自定义尺寸</dt>
              <dd className="resize">
                <input type="text" placeholder=" 宽度(可选)" 
                  value={store.width}
                  ref={widthRef}
                  onChange={() => store.setWidth()}
                />{' '}
                -{' '}
                <input
                  type="text" placeholder=" 高度(可选)"
                  ref={heightRef}
                  value={store.height}
                  onChange={() => store.setHeight()}
                />
              </dd>
              <dd>
                <input type="text" className="filename" readOnly ref={resizeUrlRef} value={store.fullStr} />
              </dd>
            </dl>
          </Result>
        ) : (
          ''
        )}
      </div>
    </>
  )
})
export default Uploader

让 input 只能输入数字

让 input 只能输入数字，且不能以 0 开头
利用受控组件的特性，input 的 value 只能在 onChange 事件中修改，通过正则表达式判断，符合规则才修改 value

<input
  type="text"
  placeholder=" 高度(可选)"
  ref={heightRef}
  value={store.height}
  onChange={(e) => {
    if (
      e.target.value === '' ||
      /^[1-9][0-9]*$/.test(e.target.value)
    ) {
      store.setHeight()
    }
  }}
/>