前端:
主要依赖: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)
}
<