Vue客户端通过api上传阿里云oss，压缩图片并加水印

首先进入Bucket列表，进行跨域设置

在开发的时候，可以填写本地localhost的地址，或者直接用*来代替也行，等正式上线后必须填写真实的域名

阿里云建议

阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。

所以我们新建一个RAM账户吧，进入RAM管理后台，如果找不到入口，可以顶部搜索一下就行，吐槽一下，阿里云控制面板工作台的确太杂了，经常会找不到，然后创建用户，Open Api选上：

然后给用户添加权限，oss的权限给勾上

然后到用户个人资料点，创建AccessKey，然后保存到本地，因为Key只展示一次哦。

服务端配置好了，现在是本地代码呢，阿里云提供各种语言的api接口，详情点击这里。

我们这里以Vue为例，前端上传控件，直接上传到阿里云oss，非常的方便，还能进行图片自动压缩和加水印。

回到oss控制台，打开图片处理页面。

点击新建样式，这里可以预设一下对图片的各种处理，大家可以根据实际需求来写。

我的配置大致思路就是图片超过800px的话，压缩到800px，高度等比例压缩，如果没有超过800，则默认大小，右下角加上水印。规则命名一定要牢记哦，下面会用到。

好了，现在回到Vue了，先安装。

npm install ali-oss                           

先创建一个方法，构造文件名

// 根据选择的文件，拼凑上传最终路径
const createFileUploadPath = (file) => {
    const dir = 'newsimg' // oss存储的目录
    const fileExt = file.name.split('.')[1] // 文件扩展名
    const date = new Date()
    return `${dir}/${date.getFullYear()}/${date.getMonth() + 1}/${random(12)}.${fileExt}`}

接下去的思路就是，先把图片上传到OSS，然后通过持久化处理，保存压缩后的图片。

以下是wang编辑器中，图片上传到OSS，注意gif动画图片如果在oss中处理后，会失去动画能力，所以根据自己也无需求，去除gif的持久化操作。

instance.config.customUploadImg = (resultFiles, insertImgFn) => {
    // resultFiles 是 input 中选中的文件列表
    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
    resultFiles.forEach((item) => {
    let imagePath = createFileUploadPath(item)
    client.put(imagePath, item) // 上传到OSS
    .then((res) => {
        // 上传图片，返回结果，将图片插入到编辑器中
        client.processObjectSave( // 持久化处理
        imagePath, // 源文件
        imagePath, // 目标文件，这里设置等同于覆盖源文件
        'style/shuanghei',// 规则命名
        'shuanghei' // Bucket
        ).then(() => {
            res.url = res.url.replace('https', 'http').replace('http', 'https')
            insertImgFn(res.url)
        })
    }).catch((err) => {
        console.log(err)
        })
    })
}

至此大功告成，如果想更改style，也无需修改代码，只需要在oss图片管理修改生成规则即可，非常方便。