阿里云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

  1. 需要配置RAM角色的权限。
  2. 如果发生还是无法上传图片的情况,则可以考虑是浏览器问题,可以尝试更换浏览器进行尝试。

链接