React阿里OSS上传组件

Ali-OSS-Img-Upload

Github 地址

传送门

Install

$ npm i ali-img-upload --save

Description

本组件接入了阿里云OSS SDK，配合antd Upload上传组件，进行分片上传图片至阿里云OSS对象存储。

组件使用了持久化授权，官网提供了如何去设置临时授权模式，你可以在本组件基础进行二次开发。

How To Use？

import React from 'react';
import { AliUpload } from 'ali-img-upload';
import { Form } from 'antd';

export default function Demo() {

    // antd form 实例
     const [form] = Form.useForm();

    return (
        <AliUpload
            ossConfig={{
                 region: '',
                 accessKeyId: '',
                 accessKeySecret: '',
                 bucket: ''
            }}
            baseURL={""}
            form={form}
        />
    )
}

项目接入方案（以create-react-app创建的项目为例）

采坑记：create-react-app内部配置的babel是不支持的编译node_modules的jsx语法与less的，所以借助cra配置。

• 第一步：安装customize-cra与react-app-rewired
• 修改package.json

{
 "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test"
  }
}

• 创建config-overrides.js

const { override, addWebpackAlias, addWebpackModuleRule, babelInclude, addLessLoader } = require('customize-cra');
const path = require('path');
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
    webpack: override(

        addLessLoader({
            javascriptEnabled: true,
            // modifyVars: { '@primary-color': '#1DA57A' },
        }),
        addWebpackAlias({
            "@": resolve("src")
        }),
        // addBabelPreset({
        //     test: ["./node_modules/ali-img-upload"],
        //     presets: ["@babel/preset-react"]
        // })
        addWebpackModuleRule({
            test: /\.less$/,
            include: resolve('node_modules'),
            use: ['style-loader', 'css-loader', 'less-loader'],
        }),
        babelInclude([
            resolve('src'),
            resolve('node_modules')
        ])
    )
}

Note

• 注意在重写babel配置的时候，对于less处理的loader顺序。loader编译的顺序始终是从下往上的,也即从右往左。
• include部分应始终包含node_modules和src两部分。

Demo

LICENSE MIT

Copyright By Eric Wang