Vue上传文件到阿里云

作者:神秘网友 发布时间:2020-09-07 17:15:25

Vue上传文件到阿里云

Vue上传文件到阿里云

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

Vue上传文件到阿里云

暴露Headers
ETag
x-oss-request-id

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

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

npm install ali-oss

有的可能提示需要安装[email protected]^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();
},

Vue上传文件到阿里云相关教程

  1. 自定义 文件上传按钮样式
  2. IDEA新建没有Vue选项
  3. Vue-组件-component
  4. 【Vue.js学习笔记Day03】v-bind指令的学习
  5. Vue-指令(v-bind,v-if,v-else,v-else-if,v-for,v-on)
  6. SpringBoot 读取配置文件及profiles切换配置文件
  7. 文件上传三种方式
  8. OBIEE 12c Weblogic中部署自定义文件夹