阿里云oss上传文件 excel 图片 视频 基本使用

下载依赖 npm install ali-oss

这里用的elementUI 里的upload上传文件功能


<el-form-item label="图片" prop="content" class="editor_box">
    <el-upload action="" class="avatar-uploader" :http-request="uploadAvatarTwo"
    :before-upload="beforeUpload" :on-success="handleSuccess"
     accept=".png,.jpg,.gif,.jepg" :show-file-list="false">
     </el-upload>
</el-form-item>
    // 图片上传阿里云之前 调用后台接口获取一些上传oss的参数
            async beforeUpload(file) {
                let that = this
                this.uillUpdateImg = true
                this.videoFlag = false
                await http.get("/photo/fetchStsCredentials", {})
                    .then(function (res) {
                        that.accessKeyId = res.data.accessKey;
                        that.accessKeySecret = res.data.accessKeySecret;
                        that.securityToken = res.data.securityToken
                    })
                    .catch(function (err) {
                        console.log("连接失败" + err);
                    });
            },
//上传到阿里云oss
 uploadAvatarTwo(options) {
                let that = this
                let client = new OSS({
                    region: "oss-cn-qingdao",
                    accessKeyId: that.accessKeyId,
                    accessKeySecret: that.accessKeySecret,
                    stsToken: that.securityToken,
                    bucket: "medai",
                });

                let file = options.file; // 拿到 file
                let fileName = file.name.substr(0, file.name.lastIndexOf('.'))
                let date = new Date().getTime()
                let fileNames = `${date}_${fileName}`
                client.put(fileNames, file,).then(res => {
                    if (res.res.statusCode === 200) {
                        console.log(res);
                        options.onSuccess(res)
                    } else {
                        options.onError("上传失败")
                    }

                })
            },
//上传成功后回调
 handleSuccess(res) {
       console.log(res);
     
     // 如果上传成功 
       if (res) {
                
        } else {
               
        }
     // loading动画消失
      this.uillUpdateImg = false
},

猜你喜欢

转载自blog.csdn.net/qq_36657291/article/details/124746765