Vue 阿里云OSS上传图片

创建上传按钮

<el-upload 
                    :action="webUpload"  // 上传图片地址
                    :headers="authorization"  // token
                    :on-success="uploadSuccess"   // 文件上传成功时的钩子
                    :on-error="uploadError"  //文件上传失败时的钩子
                    :before-upload="beforeUpload"  //上传文件之前的钩子
                    :show-file-list="false" // 是否显示上传文件列表
                    style="margin-top: 20px;">
                        <el-button size="small" style="margin-left: 10px; border: 1px solid #4A90E2;color: #4A90E2;">修改头像</el-button>
                    </el-upload>

上传图片前

 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)
            })
        },