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-crareact-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

alt

LICENSE MIT

Copyright By Eric Wang

阅读 332

推荐阅读
前端江湖
用户专栏

前端基础知识、框架、工程化开发分享,前端技术栈研究。加油吧,在前端的道路上奔跑。

320 人关注
44 篇文章
专栏主页