uniapp上传图片到阿里oss | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第2天

一、需求背景

参加青训营期间还跟团队一起做着一个小程序项目，其中有一个需求：就是获取上传图片链接，然后由前端通过该链接直接上传图片到阿里OSS，其实也可以后台他们自己传的，但自己的服务器抗压能力和阿里云的服务器抗压能力相比还是差距明显，所以由前端上传也可以减轻我们自己服务器的压力，避免短时间内请求上传的数据量太大。

当时阿里oss要求的上传方式是PUT，去oss后台配置post居然不起作用，我用eolinker测试上传链接照样只能put，不能post

二、尝试

1.uni.uploadFile&uni.chooseImage

最开始想用的是uni.uploadFile这种方法的，因为我用的是uni.chooseImage,但它获取的是图片临时路径，返回的tempFiles也不是二进制流，所以我又想到用临时路径去获取图片，自己转成二进制流，然后搜索相关方法的过程中又遇到了base64，哭了，当时被这个搞几个东西都搞混了，最后得到的也不像是想要的效果，在这条道路上没探索到底。。。。

2.引入axios

当时尝试的第二条路就是引入axios，因为之前有在vue项目中使用axios上传过音频，所以用axios还是有点点经验（也就是有自己的代码参考哈哈），但这条路显然走得更短，遇到自定义适配器，照着教程写还是一点效果没见着，也不知道错在哪（这个我之后一定要搞懂呜呜）

三、成功实现

最后，还是靠一个插件实现的

axios-miniprogram-adapter - npm (npmjs.com)

import axios from "axios";
import mpAdapter from "axios-miniprogram-adapter";
//拿到uploadLink之后如下使用就行
axios({
      method: "put",
      url: res.uploadLink,
      data: uni.getFileSystemManager().readFileSync(tempfilespath.src),
      headers: {
        "Content-Type": "image/jpeg",
      },
    })

果然能用插件实现的最好啦，也方便