VueはElement el-uploadコンポーネントを使用してピットに足を踏み入れます

 <el-アップロード
            action="https://xxxx アドレス"
            :headers="ヘッダーをインポート"
          >
   </el-アップロード>
 
'@/utils/token' から {getToken} をインポートします。
 
 
データ（） {
    戻る {
      インポートヘッダー: {トークン: getToken()},
    };
  },

 <el-アップロード
            アクション="https://security.brofirst.cn/api/common/upload"
            :headers="ヘッダーをインポート"
            :limit="制限"
             :on-exceed="masterFileMax"
          >
            <i class="el-icon-plus"></i>
          </el-アップロード>
 
 
 
  // 最大何枚の写真をアップロードできるか masterFileMax(files, fileList) {
        console.log(ファイル、ファイルリスト);
        this.$message.warning(`最大 ${this.limit} 個のファイルをアップロードしてください。`);
    },

  <el-アップロード
             accept=".JPG、.PNG、.JPEG、.jpg、.png、.jpeg"
             複数
          >
            <i class="el-icon-plus"></i>
          </el-アップロード>

   <el-アップロード
            アクション="https://xxxx"
            :headers="ヘッダーをインポート"
            リストタイプ="絵カード"
            :on-preview="ハンドルPictureCardPreview"
            :on-remove="ハンドル削除"
            :on-success="アバターハンドル成功"
            :limit="制限"
             :on-exceed="masterFileMax"
             accept=".JPG、.PNG、.JPEG、.jpg、.png、.jpeg"
             複数
          >
            <i class="el-icon-plus"></i>
          </el-アップロード>
 
 
 
<スクリプト>
'@/utils/token' から {getToken} をインポートします。
エクスポートデフォルト{
  名前:'フィードバック',
  データ（） {
    戻る {
      インポートヘッダー: {トークン: getToken()},
       画像:[],
      制限:9
    };
  },
  メソッド: {
  //画像を削除する handleRemove(file, fileList) {
     const idx = this.images.findIndex(it=>it===file.response.data.fullurl)
     this.images.splice(idx,1)
    },
    handlePictureCardPreview(ファイル) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //アップロード成功後のデータ handleAvatarSuccess(response, file, fileList){
      console.log(レスポンス、ファイル、ファイルリスト);
      if(レスポンスコード===1){
        this.images.push(レスポンスデータ.fullurl)
      }
    },
    // 最大何枚の写真をアップロードできるか masterFileMax(files, fileList) {
        console.log(ファイル、ファイルリスト);
        this.$message.warning(`最大 ${this.limit} 個のファイルをアップロードしてください。`);
    }
  }
};
</スクリプト> 

<el-アップロード
               v-else
               クラス='ensureensureButt'
               :action="インポートファイルURL"
               :data="アップロードデータ"
               name="インポートファイル"
               :onError="アップロードエラー"
               :onSuccess="アップロード成功"
               :beforeUpload="アバターアップロード前"
               >
               <el-button size="small" type="primary">OK</el-button>

データ （） {
    インポートファイル URL: 'http:dtc.com/cpy/add',
    アップロードデータ: {
        cpyId: '123456', 
        発生時刻: '2017-08'
    }
},
メソッド: {
    // アップロード成功後のコールバックuploadSuccess (response, file, fileList) {
      console.log('ファイルをアップロード', 応答)
    },
    // アップロードエラー uploadError (response, file, fileList) {
      console.log('アップロードに失敗しました。もう一度お試しください!')
    },
    // アップロード前にファイルサイズを決定する beforeAvatarUpload (file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const extension3 = file.name.split('.')[1] === 'doc'
      const extension4 = file.name.split('.')[1] === 'docx'
      定数isLt2M = ファイルサイズ / 1024 / 1024 < 10
      if (!拡張子 && !拡張子2 && !拡張子3 && !拡張子4) {
        console.log('アップロードできるテンプレートは xls、xlsx、doc、docx 形式のみです!')
      }
      もし (!isLt2M) {
        console.log('アップロードされたテンプレートのサイズは10MBを超えることはできません!')
      }
      拡張子を返す || extension2 || extension3 || extension4 && isLt2M
    }
}