react 上传文件到阿里云oss

最新推荐文章于 2024-05-09 10:58:56 发布

小鱼小鱼起来码码

最新推荐文章于 2024-05-09 10:58:56 发布

阅读量548

点赞数

分类专栏： react 文章标签： react.js 阿里云 typescript

本文链接：https://blog.csdn.net/weixin_41398468/article/details/125280951

版权

本文介绍如何在React项目中结合typescript，利用ali-oss库实现文件上传到阿里云对象存储服务。首先，需要安装ali-oss，然后在页面代码中编写上传逻辑，通过调用阿里云OSS的API完成文件上传功能。

摘要由CSDN通过智能技术生成

1，安装 ali-oss

npm/cnpm install ali-oss --save

2,页面代码

import React, { useState, useEffect } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import API from '@/services/settings';
import { Upload, Button } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import style from './index.less';

const { Dragger } = Upload;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const OSS = require('ali-oss');
interface IProps {
  onChange?: any; //?非必填
  value?: any;
  type?: any; //上传类型
  fileList?: any;
}
const UploadOSS: React.FC<IProps> = (props: IProps) => {
  let list: any;
  const [propsValues, setPropsValues] = useState(list);
  const updateValues = () => {
    const listValues: any = [];

    let fileList = props.fileList;
    if (typeof props.