Vue 阿里云OSS上传图片

创建上传按钮

                        修改头像
                    

上传图片前

 beforeUpload(file) {
            // this.$refs.refUpload.clearFiles();
            this.fileImg = file;
        },

上传图片

uploadSuccess(res) {
            // console.log('上传图片', res)
            if(res.code === 0) {
                this.ossImgData = res.data    // 获取阿里云需要的信息
                this.ossUploadImg();
            }else {
                this.$message.error(res.message);
            }
        },

上传图片失败

    uploadError(error) {
            this.$Message.error('上传失败');
       },

开始上传

ossUploadImg() {
            var ossData = new FormData();
            var ossImgData = this.ossImgData;
            ossData.append('OSSAccessKeyId',ossImgData.accessid);
            ossData.append('policy', ossImgData.policy);
            ossData.append('Signature', ossImgData.signature);
            //上传阿里云需要一个动态的random
            ossData.append('key', ossImgData.accessKey);
            ossData.append('success_action_status', 200); // 指定返回的状态码
            ossData.append("callback", ossImgData.callback);
            ossData.append("dir", ossImgData.dir);
            ossData.append("file", this.fileImg);
            let url = ossImgData.host;
            let config = {
                headers: {
                'Content-Type': 'multipart/form-data'
                }
            };
// 上传成功后，返回给你一个图片地址
            Axios.post(url, ossData, config).then(res => { 
                console.log('上传res', res)
                this.base.avatar = res.data.message;
            }).catch(err => {
                console.log('上传err：', err)
            })
        },