創(chuàng)建上傳按鈕

<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);
            //上傳阿里云需要一個動態(tài)的random
            ossData.append('key', ossImgData.accessKey);
            ossData.append('success_action_status', 200); // 指定返回的狀態(tài)碼
            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)
            })
        },