Vue iview upload component and laravel 7 server upload cross-domain and front-end proxy solution

I am working on a project recently and I have read a lot of articles about upload components on the Internet. Today I will summarize my own experience of using upload components.

The most powerful explanation is the code, on the code

1. Use the iview upload component to upload files (with token, with parameters)

 

<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')
   },
 }

The laravel interface code is roughly as follows:

public function import(Request $request)
    {

        $data = $request->post();

        if(!isset($data['userInfo'])) {             return $this->exceptionOut('User information acquisition failed');         }

        $userInfo = $this->getUser($data);
        if(!isset($userInfo['uid']) || !isset($userInfo['uname'])) {             return $this->exceptionOut('User Information acquisition failed');         }

        $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("The file type must be:'xlsx','xlx'");         }         // 3. Determine whether the size meets 3M


        




        




        $tmpFilePath = $file->getRealPath();//临时文件 "/tmp/phpMKWbae"
        $sizeLimit = 3;
        if (filesize($tmpFilePath) >= $sizeLimit * 1024 * 1024) {
            return $this->exceptionOut("'文件大小应小于{$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());
        }
    }

Of course, the token verification is placed in Middleware for processing, and the corresponding cross-domain processing can be done.

The above is the upload code of the front-end. After the back-end decrypts the token, the data is processed and the result is returned to the front-end. The effect is as follows: