Vue sent the picture directly from the front desk to OSS and reported a 400th error all the time.

1. The front end uploads pictures and modifies avatars via OSS

clipboard.png

handleFile(event) {
            var client = new OSS({
                region: OSSConfig.ossParams.region,
                accessKeyId: OSSConfig.ossParams.accessKeyId,
                accessKeySecret: OSSConfig.ossParams.accessKeySecret,
                bucket: OSSConfig.ossParams.bucket,
            })
            var file = event.currentTarget.files[0]
            let random_name = `${this.random_string(
                6,
            )}_${new Date().getTime()}.${file.name}`
            // 
            // client
            //     .multipartUpload(random_name, file, {
            //         progress: async function(p) {
            //             console.log("Progress: " + p)
            //         },
            //         meta: {
            //             year: 2018,
            //             people: "test",
            //         },
            //         mime: "image/png",
            //     })
            //     .then(results => {
            //         // 
            //         const url = `${OSSConfig.uploadHost}/${results.name}`
            //         console.log(url)
            //     })
            //     .catch(err => {
            //         console.log(err)
            //     })
            this.multipartUpload(client, random_name, file)
        },
        async multipartUpload(client, random_name, file) {
            try {
                let result = await client.multipartUpload(random_name, file, {
                    progress: async function(p) {
                        console.log("Progress: " + p)
                    },
                    meta: {
                        year: 2018,
                        people: "test",
                    },
                    mime: "image/png",
                })
                console.log(result)
                let head = await client.head(random_name)
                console.log(head)
            } catch (e) {
                // 
                if (e.code === "ConnectionTimeoutError") {
                    console.log("Woops,!")
                    // do ConnectionTimeoutError operation
                }
                console.log(e)
            }
        },
        // 
        random_string(len) {
            len = len || 32
            var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678"
            var maxPos = chars.length
            var pwd = ""
            for (let i = 0; i < len; iPP) {
                pwd += chars.charAt(Math.floor(Math.random() * maxPos))
            }
            return pwd
        },

N words have been changed, but the result is that the root of the problem has not been found.

Jul.15,2021

it turns out that bucket made a mistake

Menu