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