This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

introduce

In the work, there are often a variety of forms need to deal with, in addition to the style, logic and other external factors, the rookie feel that the upload file component is the most troublesome, if this component is well handled, is it possible to greatly reduce the development time, there is more time to fish?

I am an inspirational when the small front end of the fish, of course, is the first to finish the work, so I plan to do, so that can be aboveboard fish ~~

As for file uploading, I believe most students are familiar with it. Since I am a big fan of ants, the packaged component is the Upload of Ant Design

Among the numerous functions of Upload, I think the one that is most worthy of ridicule is the tailoring function

Let’s look at the official cut

To be honest, this clipping is really boring, because you can’t control the clipping area according to the size of the image, you can only control the clipping area according to the size of the image

Therefore, this paper is mainly to solve the problem of encapsulation, and integrate some small functions to make the component more perfect.

Function is introduced

When you need OSS, custom image cropping, file type, file size, whether to detect the same file function, you can try using this component to help you quickly build 👏🏻👏🏻 port

First post a picture of what it looks like after cropping:

Online example: Domesy/OssUpload

GitHub address: Domesy/ ant-design-pro-V5

Blue Blue (· ω ·

OssUpload

To implement custom clipping, use Upload and react-cropper for encapsulation

oss

When you need to save the image, it is recommended to enable OSS. It will directly return a network address, which is very convenient. This document will not describe how to configure OSS

When configured, we need to get these four parameters

  • Region: source address
  • AccessKeyId: the value is dropped during interface authentication and must be obtained from the console of aliyun official website
  • AccessKeySecret: Obtained from the console on the official website of Alicloud
  • Bucket: a unique name

beforeUpload

All the encapsulation we do is basically judge the beforUpload of the Upload component

When we open the clipping function, we only need to cooperate with the frame component, and at the same time we can modify other styles in the frame, such as

This enables a clipping function

At the same time, we can judge the file type, file size, whether to upload the same file and other operations according to this method, so as to make the construction more perfect.

Here are some examples of what I’ve wrapped:

The results of

The result will be returned to us as an array, mainly in the form of enabled OSS and not enabled OSS

Enable OSS: Directly returns the corresponding address

If OSS is not enabled, related instances and images of the file file will be returned as Base64

other

  • The default image can be passed in string[] as the link address, which is the name of the preview box for a fixed image. If you want to pass in an object, refer to the Upload default value, as shown in
    initFile={
      [
        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        {
          name: 'Image tag'.url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'.status: 'done'}}]Copy the code
  • When setting one image, use radio Settings, multiple images use multiple images mode, of course, assuming that only 2 photos are allowed to be uploaded, and you upload 3 photos when you select multiple, then 2 photos will be taken
  • If you set type to PNG, only PNG images are allowed to upload, and no other formats are allowed to upload
  • File size limit: The limit here is in M
  • There are three main modes, namely text picture picture-card, in which picture-card mode can only upload pictures
  • Text and Picture mode can set children, custom mode, if not, a default button

How to use

There is no paste component here, afraid of being sprayed (●￣(日 本 国 日 本), can tell how to use ~

import { OssUpLoad } from '@/components';

<OssUpLoad
    amount={3}// Limit the number of cardsinitFile=[...].// Default imagecrop// Clipping functionOSS/ / openOSS
    rules: {.} // Set upload rules, size, etcgetFiles={(file: Array<any>, flag) => {}} // get file... props />Copy the code

The last

So a simple picture file upload component has been made. Finally, it needs getFiles to get the corresponding results. I hope this component can help solve the function of the project

To help you 🐯 year 🐯🐯 Shengwei, better fishing in the New Year, nay, better work.