阿里OSS 客户端上传跨域问题

1
2
3
4
5
6
7

@CrossOrigin(origins = "http://localhost:3000",maxAge = 3600)
@RequestMapping("/free/")
public class OssController {
    @Resource
    private FileService ossService;

}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import React, { useEffect } from "react";
import { useTeacherAddCourse } from "../../../hooks/teacher/useTeacherCourse";

import { Table, Space, Modal, message, Input, Form, Button, Upload } from 'antd';
import { useOssToken, useUploadImgFile } from "../../../hooks/oss/useOssToken";
import { UploadOutlined } from '@ant-design/icons'

<Form.Item
              name="upload"
              label="上传图片"
              valuePropName="fileList"
              getValueFromEvent={normFile}
              extra="上传一张小于2M的图片"
            >
              <Upload name="logo" 
                beforeUpload={()=>false}
                defaultFileList={img}
                onChange={({file})=>{uploadFile(file)}}
                maxCount={1} //限制图片数量
              
                listType="picture"
              >
                <Button icon={<UploadOutlined />}>Click to upload</Button>
              </Upload>
            </Form.Item>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

import React, { useEffect, useState } from "react";


import Request from "../../api/Request";

const useOssToken = () => {
  const [version,setVersion] = useState(0)
  const [policy,setPolicy] = useState({
    accessid:'',
    policy:'',
    signature:'',
    dir:'',
    expire:'',
    callback:'',
    host:'',
  })
  useEffect(()=>{
    Request({
      url:'/free/policy',
      method:'GET',

    }).then(res => {
      let data = res.data?.data;
      let policy = data.policy;
      console.log(policy)
      setPolicy(policy);
      // let resultContent = data.resultContent;
      
    }).catch((err)=> {
      console.log('error = ',err)
    })
    .finally(res=> {
      console.log(res)
    })
  },[version])


  return {
    setVersion,
    version,
    policy,

  }


}


const useUploadImgFile = (ossToken) => {
  // console.log('osstoken,',ossToken)
  const [img,setImg] = useState('')
  const uploadFile = (file) => {
    const filename = file.name;
    let formData = new FormData();
    formData.append("key", ossToken.dir + filename); //存储在oss的文件路径
    formData.append("OSSAccessKeyId", ossToken.accessid); //accessKeyId
    formData.append("policy", ossToken.policy); //policy
    formData.append("Signature", ossToken.signature); //签名
    formData.append("callback", ossToken.callback); //回调
    formData.append("success_action_status", 200); //成功后返回的操作码
    //如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
    formData.append("file", file);
    // formData.append('')
    Request({
      url:`${ossToken.host}`,
      method:'POST',
      data:formData,
      
    }).then(res => {
      console.log('upload result = ',res)
    })
  }

  return {
    img,
    uploadFile,
  }
}

export {
  useOssToken,
  useUploadImgFile,
}