Vue上传文件到阿里云

阿里云存储配置跨域需要把PUT跨域配置一下

暴露Headers
ETag
x-oss-request-id

Vue 前端上传文件到阿里云存储代码：

1. 需要先安装阿里云的上传库:

npm install ali-oss

有的可能提示需要安装ajv@^6.9.1，也安装一下

2. 配置部分代码：

data() {
    return {
        shop_name: '',
        fileList: [],
        tempUrl: '', //存上传后的图片url
        dataObj: {
            region: 'oss-cn-beijing',//我的存储是北京，可根据具体配置自行修改
            accessKeyId: '',
            accessKeySecret: '',
            bucket: '',

        }, //存签名信息
        baseAli:'oss-cn-beijing.aliyuncs.com',/我的存储是北京，可根据具体配置自行修改
        progress: 0//进度条
    }
},

3. 上传部分代码：

afterRead(file) {
    // 此时可以自行将文件上传至服务器
    //console.log(file);
    const that = this;
    //判断扩展名
    const tmpcnt = file.file.name.lastIndexOf(".");
    const exname = file.file.name.substring(tmpcnt + 1);
    const names = ['jpg', 'jpeg', 'webp', 'png', 'bmp'];
    if (names.indexOf(exname) < 0) {
        this.$message.error("不支持的格式!");
        return
    }

    let client = new OSS(this.dataObj);

    async function multipartUpload() {

        const fileName = file.file.name;
        //定义唯一的文件名，打印出来的uid其实就是时间戳
        //client 是第一步中的 client
        client.multipartUpload(fileName, file.file,
            {
                progress: function (p) { //获取进度条的值
                    console.log(p);
                    that.progress = p * 100
                },

            }).then(
            result => {
                //下面是如果对返回结果再进行处理，根据项目需要
                // console.log(result)
                that.tempUrl = 'http://' + result.bucket + '.' + that.baseAli + '/' + result.name
                console.log(that.tempUrl);

            }).catch(err => {
            console.log("err:", err)
        })
    }

    multipartUpload();
},