阿里云OSS使用前端JavaScript上传出现错误

阿里云和腾讯云都推出了云储平台，可以用来上传需要的文件或者是存放备份等数据，价格相对低廉，并且按照流量、请求以及固定成本收费，对于小网站非常合适。

OSS支持使用JavaScript进行图片的上传和下载，需要引入阿里云提供的JavaScript相关的API，如下代码所示。
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.14.0.min.js"></script>
使用OSS服务时，首先需要在阿里云后台管理中新建一个存储桶，创建一个新的RAM角色，获取到固定的accessKeyId和accessKeySecret，使用时需要指定OSS的名称和地点。
如下代码所示。

    <!-- 上传方法 -->
    let HTTP_URL = "https://xxx.com/"
    let OSSConfig = {
        uploadHost: 'https://xxx.oss-cn-shanghai.aliyuncs.com', //OSS上传地址
        type: 'scs',
        ossParams: {
            region: 'oss-cn-shanghai',
            accessKeyId: '',
            accessKeySecret: '',
            bucket: 'cross-index',
        },
    }

接下来新建一个OSS上传对象，如下代码所示。

    let stsTokenRes = {SecurityToken: ''}
    let client = new OSS({
        region: OSSConfig.ossParams.region,
        secure: true,//*这句话很重要
        accessKeyId: OSSConfig.ossParams.accessKeyId,
        accessKeySecret: OSSConfig.ossParams.accessKeySecret,
        bucket: OSSConfig.ossParams.bucket,
        stsToken: stsTokenRes.SecurityToken,
    })

然后可以直接使用此对象进行文件的上传操作，如下代码所示。

    function random_string(number) {
        let len = number || 32
        let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
        let maxPos = chars.length
        let pwd = ''
        for (let i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos))
        }
        return pwd
    }

    function getExtensionFileName(pathFileName) {
        let reg = /(\\+)/g;
        let pString = pathFileName.replace(reg, "#"); //用正则表达式来将\或\\替换成#
        let arr = pString.split("#"); // 以“#”为分隔符，将字符分解为数组 例如 D Program Files bg.png
        let lastString = arr[arr.length - 1]; //取最后一个字符
        let arr2 = lastString.split("."); //   再以"."作为分隔符
        return "." + arr2[arr2.length - 1]; //将后缀名返回出来
    }

    function uploadOSS(savePath, file) {
        return new Promise((resolve) => {
            let randomName = random_string(6) + getExtensionFileName(file.name)
            client.multipartUpload(savePath + "/" + randomName, file).then((res) => {
                if (res) {
                    resolve(HTTP_URL + savePath + "/" + randomName)
                } else {
                    console.log(res)
                }
            })
        })
    }
    // 通用图片上传方法
    function useOSSUpload(savePath = "image") {
        console.log($("#uploadFile")[0].files[0])
        uploadOSS(savePath, $("#uploadFile")[0].files[0]).then((uploadUrl) => {
            console.log(uploadUrl)
            if (uploadUrl) {
                $("#uploadFileValue").val(uploadUrl)
            }
        })

    }

---

注意事项：

1. 需要在OSS的后台中设置访问域名和上传跨域问题，（存储桶->权限管理->跨域设置）
   来源
   *
   允许 Methods
   POST
   PUT
   GET
   HEAD
   允许 Headers
   *
   暴露 Headers
   etag
   x-oss-request-id
   缓存时间（秒）
   0

2. 需要配置RAM角色的权限。

3. 如果发生还是无法上传图片的情况，则可以考虑是浏览器问题，可以尝试更换浏览器进行尝试。