文件上传【阿里云OSS】

首先  我们要明白头像上传的难点在于  如何打通前后端  使前端的数据转化格式后在后端保存上传

这时 我们需要定义一个基本的react脚手架用来搭建我们的前端页面

import React, { useRef, useState } from 'react'
import Hoc_login from '../../utils/Hoc_login'
// 获取前后端交互的接口
import { get_img } from '../../api'

function System() {
    // 定义一个ref来获取input标签
    let inp_img = useRef()
    // 定义一个状态来获取图片的url
    let [url, setUrl] = useState()

    // 定义一个函数来获取图片
    let change_img = async () => {
        // 获取input标签的文件
        let file = inp_img.current.files[0]
        // 判断是否选择了文件
        // 如果没有选择文件，就弹出提示框
        if (!file) {
            return alert('请选择文件')
        }

        // 将文件添加到formData中 
        let formData = new FormData()
        formData.append('file', file)

        // 调用接口，将文件上传到服务器中
        let res = await get_img(formData)
        if (res.data.code == 200) {
            alert('上传成功')
            setUrl(res.data.url)
        }
    }
    return (
        <div>
            <input type="file" ref={inp_img} multiple onChange={change_img} />
            <img src={url} style={{ width: '100px', height: '100px' }} alt="" />
        </div>
    )
}

export default Hoc_login(System)

当然  当前端页面可以获取到input标签上传的文件后，我们就需要进行后端的一个基本的编写

同理 我们搭建一个基本的Koa框架以便于我们可以完成最基本的上传功能

const Koa = require('koa')
const { koaBody } = require('koa-body')
const Router = require('koa-Router')
const OSS = require('ali-oss')
const cors = require('@koa/cors')
const bodyparser = require('koa-bodyparser')

const app = new Koa()
const router = new Router()
const client = new OSS({
    // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
    region: 'oss-cn-beijing',
    // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
    accessKeyId: '你的AccessKey ID',
    accessKeySecret: '你的AccessKey ',
    // 填写Bucket名称。
    bucket: 'yezifan',
});
// 定义一个路由的post接口
router.post('/api/upload', async (ctx) => {
    // 获取上传的文件
    let file = ctx.request.files.file
    try {
        // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
        // 如果本地文件的完整路径中未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
        const result = await client.put(file.originalFilename, file.filepath);
        ctx.body = {
            code: 200,
            msg: '上传成功',
            url: result.url
        }

    } catch (e) {
        console.log(e);
    }
})
// 解决跨域问题
app.use(cors())
//  koa-body解析post请求参数
app.use(koaBody({
    multipart: true
}))
// koa-bodyparser解析post请求参数
app.use(bodyparser())
// 使用路由
app.use(router)
// 监听端口x
app.listen(9000, () => {
    console.log('9000端口启动成功');
})

当然  到这里就差一个接口就可以完成此项目  但是最容易出错的点也就在这里

// 获取你的axios
import axios from 'axios'
// 编写接口
// 注意 这里的网址端口号一定要跟你后端的koa框架里的端口号保持一致
export let upload = (data) => axios.post('http://localhost:9000/upload',data)

 就此  一个简单的文件上传就编写完成

此方法只可上传于阿里云的OSS