這裡使用element Upload 使用者頭像上傳
HTML部分

<el-upload
  class="avatar-uploader"
  action=" 123"  // 這個地址不是必須的。可隨便寫
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
 

上傳：

beforeAvatarUpload(file) { //上傳前的函式
 //上傳前對圖片型別和大小進行判斷
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上傳頭像圖片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上傳頭像圖片大小不能超過 2MB!');
        }
        //校驗成功上傳檔案
        if(isJPG && isLt2M == true){
          console.log(file);

          //將檔案轉化為formdata資料上傳
          let fd = new FormData()
          fd.append('file', file)
          console.log(fd)
       
        // post上傳圖片

           let that = this
         
            new Promise(function (resolve, reject) {
                that.axios.post('/file/imgUpload', fd, 
                      {
                      headers: {
                      'Content-Type': 'multipart/form-data'
                      }
                    }).then((response) => {
                       that.imgId = response.data.data
                        resolve(that.imgId);
                    }).catch((error) =>{
                        this.$message.error('頭像上傳失敗，請重新上傳!');
                    })
                   }).then(function (id){
                   that.axios.get('/file/view/'+id)
                    .then((response) => {
                         that.imageUrl = response.request.responseURL;
                     })
              })         
            }
                  return isJPG && isLt2M;
     
      },