React+js 上传

1.设置input框赋予file类型

<div className="App">
     <input type="file" ref={inp_dom} onChange={load}/>
     <img src={url} alt=""/>
</div>

2.引用input DOM并定义响应式url

let inp_dom=useRef([])；
let [url,setUrl]=useState()；

3.当点击上传事件时触发选择器并选择图片

let load=()=>{
    // 获取上传文件并上传
    let file=inp_dom.current.files[0]
    if(!file){
      alert('请选择文件')
    }else{
      // 创建formData并添加上传文件
      let formData=new FormData()
      // 追加上传的file到formData中，key为'file'，value为上传的file本身。
      formData.append('file',file)
      // 调用api上传文件
      Getload(formData).then(res=>{
        // 获取api返回的url并设置url
        console.log(res);
        // 上传成功后，alert并设置url
        alert('上传成功')
        // 注意：此处的url是api返回的url，并未经过本地url转换。
        setUrl(res.data.url)
      })
    }
  }

4.创建koa框架并找到官网：阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台

拿到我们创建列表时给的AccessKey ID和AccessKey Secret

拿到后我们到操作指南里找到Node.js上传文件：Node.js上传本地文件_对象存储(OSS)-阿里云帮助中心

代码已经帮各位童鞋们复制了

const OSS = require('ali-oss')
const path=require("path")

const client = new OSS({
  // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: 'yourregion',
  // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
  accessKeyId: process.env.OSS_ACCESS_KEY_ID,
  accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
  // 填写Bucket名称。
  bucket: 'examplebucket',
});

// 自定义请求头
const headers = {
  // 指定Object的存储类型。
  'x-oss-storage-class': 'Standard',
  // 指定Object的访问权限。
  'x-oss-object-acl': 'private',
  // 通过文件URL访问文件时，指定以附件形式下载文件，下载后的文件名称定义为example.txt。
  'Content-Disposition': 'attachment; filename="example.txt"',
  // 设置Object的标签，可同时设置多个标签。
  'x-oss-tagging': 'Tag1=1&Tag2=2',
  // 指定PutObject操作时是否覆盖同名目标Object。此处设置为true，表示禁止覆盖同名Object。
  'x-oss-forbid-overwrite': 'true',
};

async function put () {
  try {
    // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
    // 如果本地文件的完整路径中未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
    const result = await client.put('exampleobject.txt', path.normalize('D:\\localpath\\examplefile.txt')
    // 自定义headers
    ,{headers}
    );
    console.log(result);
  } catch (e) {
    console.log(e);
  }
}

put();

然后我们修改成自己的AccessKey ID和AccessKey Secret即可

const client = new OSS({
    // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
    region: 'oss-cn-beijing',
    // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
    accessKeyId:'xxxxxxxxxx',
    accessKeySecret:'xxxxxxxxxxxxxx',
    // 填写Bucket名称。
    bucket: 'xxxx',
  });

最后我们写一个post将数据与前端连接

router.post('/upload',async(ctx)=>{
    const file=ctx.request.files.file
    // console.log(file);
    try {
        // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
        // 如果本地文件的完整路径中未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
        const result = await client.put(file.originalFilename,file.filepath);
        console.log(result);
        // 上传成功后返回url
        return ctx.body={
            code:200,
            msg:'上传成功',
            url:result.url
        }
      } catch (e) {
        console.log(e);
      }
})

到这里我们想要的效果就完成了

在我们的阿里云平台上就可以看到我们上传的图片