oss对象存储(图片上传) + react -antd文件上传

前端:

主要依赖:yarn add  antd-img-crop --save(其实就是一个图片裁剪的依赖不需要图片裁剪可以不用)

import React, { Component } from "react";

import Layout from "antd/es/layout";

import { Input, Radio, DatePicker, Form, Button, Select, Table, Modal, Upload } from 'antd';

import { useState, useEffect } from 'react';

import ImgCrop from 'antd-img-crop';

import { name } from "pubsub-js"; 

import {addOss} from '../../../services/verifvication'

const { Option } = Select;

export default class yjlTest extends Component {

    state = {

        fileList: [

            // {

            //     uid: '-1',

            //     name: 'image.png',

            //     status: 'done',

            //     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',

            // },

            {

                uid: '-2',

                name: 'image.png',

                status: 'done',

                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',

            },

            // {

            //     uid: '-5',

            //     name: 'image.png',

            //     status: 'error',

            // },

        ],

        setFileList: [],

        previewOpen: null,

        setPreviewOpen: [],

        previewImage: [],

        setPreviewImage: [],

        previewTitle: [],

        setPreviewTitle: []

    };

    async uploadFile(file) {

        console.log(file);

        // // 获取文件对象

        // const file = this.$refs.fileInput.files[0]

        // 创建 FormData 对象

        let formData = new FormData();

        // 将文件添加到 FormData 中

        formData.append('file', file)

        try {

            // 使用 fetch 发送文件到服务器

            const res = await fetch('http://192.168.1.107:8352/ossManagement/ossUpload', {

                method: 'POST',

                body: formData,

                headers: {

                    'content-type': 'multipart/form-data;charset=utf-8',

                  },

            })

            console.log(await res.json())

        } catch (err) {

            console.error(err)

        }

<

你可能感兴趣的:(react.js,javascript,前端)