Vueiviewアップロードコンポーネントとlaravel7サーバーアップロードクロスドメインおよびフロントエンドプロキシソリューション

私は最近プロジェクトに取り組んでおり、インターネット上のアップロードコンポーネントに関する記事をたくさん読んでいます。今日は、アップロードコンポーネントを使用した自分の経験を要約します。

最も強力な説明は、コード上のコードです

1. iviewアップロードコンポーネントを使用してファイルをアップロードします（トークンとパラメーターを含む）

<div class="upload-item">
  <Upload
   ref="upload"
   :before-upload="handleUpload"
   :max-size="10240"
   :on-exceeded-size="handleSizeError"
   :format="['xlsx','xlx']"
   :on-format-error="handleFormatError"
   :show-upload-list="true"
   :on-progress="progress"
   :on-success="handleUploadSuccess"
   :on-error="handleUploadFail"
   :data="getUserData"
   :action="uploadUrl">
    <Button icon="ios-cloud-upload-outline">选择上传文件</Button>
  </Upload>
  <div v-if="file !== null">上传文件: {
   
   { file.name }} <Button type="text" @click="upload" :loading="loadingStatus">{
   
   { loadingStatus ? 'Uploading' : 'Click to upload' }}</Button></div>
</div>export default {
    data () {
        return {
          uploadUrl：config.apiPath + '/order/import',
          getUserData: { userInfo: localRead('userInfo'), 'token': getAccessToken() }, //当前用户信息&token
        }
    }，
    modalCancel ()  {
      this.showTemplate = false;
      this.$refs.upload.clearFiles();
    },
    handleUpload (file)  {
       this.$refs.upload.clearFiles()
    },
    handleUploadSuccess (response, file, fileList)  {
       if(response.status == 200 && response.data.status != 422){
       } else {
          this.$Message.success(file.name + '导入成功')
          this.getData(this.pageNum, this.pageSize, this.formSearch)
     }
   },
   handleUploadFail (error, file, fileList)  {
      this.$Message.error(file.name + '导入失败,请检查文件')
   },
   handleFormatError (file, fileList)  {
      this.$Message.error(file.name + '文件格式错误，必须是xls或者xlsx')
   },
   handleSizeError (file, fileList)  {
       this.$Message.error(file.name + '文件太大，不能超过10M')
   },
 }

Laravelのインターフェースコードはおおまかに次のとおりです。

パブリック関数import（Request $ request）
{

$ data = $ request-> post（）;

if（！isset（$ data ['userInfo']））{ return $ this-> exceptionOut（ 'ユーザー情報の取得に失敗しました'）; }

$ userInfo = $ this-> getUser（$ data）;
if（！isset（$ userInfo ['uid']）||！isset（$ userInfo ['uname']））{ return $ this-> exceptionOut（ 'User情報の取得に失敗しました '）; }

$ file = $ request-> file（ 'file'）;
if（is_null（$ file）||！$ file-> isValid（））{ return $ this-> exceptionOut（ 'File upload failed'）; } $ mimeType = $ file-> getClientMimeType（）; if（！in_array（$ mimeType、array（ 'application / vnd.ms-excel'、 'application / x-msexecl'、 'application / vnd.openxmlformats-officedocument.spreadsheetml.sheet' 、 'application / vnd.ms-office'、 'application / zip'、 'application / octet-stream'）））{ return $ this-> exceptionOut（ 'Upload file type error'）; } if（！in_array（$ file-> getClientOriginalExtension（）、['xlsx'、 'xlx']））{ return $ this-> exceptionOut（ "ファイルタイプは次のようにする必要があります： 'xlsx '、' xlx '"）; } // 3。サイズが3Mを満たすかどうかを判断します





$ tmpFilePath = $ file-> getRealPath（）; //临時文件 "/ tmp / phpMKWbae"
$ sizeLimit = 3;
if（filesize（$ tmpFilePath）> = $ sizeLimit * 1024 * 1024）{ return $ this-> exceptionOut（ "'文件大小3小入{$ sizeLimit} M'"）; } $ excelParse = new ExcelParse（$ tmpFilePath）; $ orderExcelParse = new OrderExcelParse（）; $ datas = []; $ error = []; $ datas = $ orderExcelParse-> parse（$ excelParse、387）;

if（$ orderExcelParse-> getErrMsg（））{ $ this-> exceptionOut（implode（ '；'、$ orderExcelParse-> getErrMsg（）））; } try { if（Order :: import（$ datas、$ userInfo））{ return $ this-> response（[]、 '操作経験'）; } else { return $ this-> exceptionOut（ "操作失败"）; } } catch（\ Exception $ ex）{ $ this-> exceptionOut（$ ex-> getMessage（））; } }

もちろん、トークンの検証は処理のためにミドルウェアに配置され、対応するクロスドメイン処理を実行できます。

上記はフロントエンドのアップロードコードです。バックグラウンドでトークンが復号化された後、データが処理され、結果がフロントエンドに返されます。効果は次のとおりです。

Vueiviewアップロードコンポーネントとlaravel7サーバーアップロードクロスドメインおよびフロントエンドプロキシソリューション

おすすめ