• 上傳頭像功能，可以使用原生的ajax，現在有了axios封裝好的ajax，通過formData的方式。
• 上傳七牛的圖片，前提是要先從後臺獲取的一個token的，上傳圖片時候作為引數傳給七牛。
• 自己對應設定反向代理

效果如下：

以下只粘貼出關鍵程式碼：

<header class="header">
    <label class="avatar-bg">
        <!--預設顯示的一張圖片-->
        <div class="avatar" v-if="!previewAvatar"></div>
        <!--七牛回撥的圖片path-->
 

        <img :src="previewAvatar" class="real-photo" v-if="previewAvatar">
        <input ref="upload" id="upload" type="file" class="realfilebt" style="display: none;"/>
    </label>
    <!--mint-ui的progress的庫-->
    <mt-progress v-if="!(progress==0||progress==100)" :value="progress"
 
 :bar-height="5"
      class="progress"></mt-progress>
</header>

<script>
//引入axios
import axios from 'axios';
import Progress from 'mint-ui/lib/progress';
import 'mint-ui/lib/Progress/style.css';
//建立axios的例項
const axiosInstance = axios.create({});

export default {
    name: 'test',
    data() {
        return
 
 {
            files: [], // 檔案
            uploadToken: '', // 上傳檔案 token
            previewAvatar: '', // 頁面展示的avatar
            progress: 0, // 進度條
        };
    },
    //node版本要是8+，以上才能使用async await的方法
    async mounted() {
        let self = this;
        //頁面載入 拉去token
        let tokenRes = await axios({
            url: '/api/sz/upToken',
        });
        this.uploadToken = tokenRes.data.token;
        this.$refs.upload.addEventListener('change', function() {
            //console.log(this.files)
            var data = new FormData();
            data.append('token', self.uploadToken);
            data.append('file', this.files[0]);
            axiosInstance({
                method: 'POST',
                url: 'http://up.qiniu.com',
                data: data,
                onUploadProgress: function(progressEvent) {
                    var percentCompleted = Math.round(progressEvent.loaded * 100 / progressEvent.total);
                    //console.log(percentCompleted)
                    //對應上傳進度條
                    self.progress = percentCompleted;
                },
            })
                .then(function(res) {
                    //console.log('res',res)
                    let { base_url, path } = res.data;
                    //頁面所用欄位
                    self.previewAvatar = `${base_url}${path}?imageView2/1/w/154/h/154`;
                    //傳給後臺不完整
                    self.formData.avatar = `${path}`;

                })
                .catch(function(err) {
                    console.log('err', err);
                });
        });
    },
    components: {
        [Progress.name]: Progress,   //mint-ui引入元件的方法
    },
};
</script>