Angular14 利用Angular2實現文件上傳的前端、利用springBoot實現文件上傳的後臺、跨域問題

時間  2019-11-08
標籤 angular14 angular 利用 angular2 實現 文件 上傳 前端 springboot 後臺 問題 欄目 AngularJS 简体版
原文   原文鏈接

1、angular2實現文件上傳前端

　　Angular2使用ng2-file-upload上傳文件，Angular2中有兩個比較好用的上傳文件的第三方庫，一個是ng2-file-upload，一個是ng2-uploader。ng2-uploader是一個輕便的上傳文件的支持庫，功能較弱，而ng2-file-upload是一個功能比較全面的上傳文件的支持庫。這裏主要介紹一下ng2-file-upload的使用。

css

　　1 下載相關模塊

　　　　進入到項目根目錄執行 npm install ng2-file-upload --savehtml

 　　　　坑01：有時候利用npm下載不成功前端

　　2 在主模塊中導入上傳模塊

　　　　

 　　　　技巧01：通常都是在共享模塊中導入再導出，而後在須要的模塊中導入共享模塊就能夠啦java

　　3 編寫上傳文件組件

import { Component, OnInit } from '@angular/core';
import {FileUploader} from 'ng2-file-upload';

@Component({
  selector: 'app-test-upload-file',
  templateUrl: './test-upload-file.component.html',
  styleUrls: ['./test-upload-file.component.css']
})
export class TestUploadFileComponent implements OnInit {
  private uploader: FileUploader = new FileUploader({
    url: '/devProject/uploadClient',
    method: 'POST',
    itemAlias: 'file'
  });

  constructor() { }

  ngOnInit() {
  }

  /**
   * 上傳文件內容變化時執行的方法
   * @param event
   */
  selectedFileOnChanged(event: any) {
    // 這裏是文件選擇完成後的操做處理
    // alert('上傳文件改變啦');
    console.log(event.target.value);
    console.log(event);
  }

  /**
   * 上傳文件方法
   */
  uploadFile() {
    alert('執行上傳文件');
    // 上傳
    this.uploader.queue[0].onSuccess = function (response, status, headers) {
      // 上傳文件成功
      if (status == 200) {
        // 上傳文件後獲取服務器返回的數據
        const tempRes = response;
        alert(response);
      } else {
        // 上傳文件後獲取服務器返回的數據錯誤
        alert('上傳失敗');
      }
    };
    // onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
    this.uploader.queue[0].upload(); // 開始上傳
    // this.uploader.queue[0].onSuccess()
    alert('上傳以後');
  }
}
View Code

 

　　4 HTML文件

<p>
  test-upload-file works!
</p>
<hr style="border: 1px solid blue;" />


<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
<button (click)="uploadFile()">點擊上傳</button>

 　　詳情請參見：點擊前往web

2、SpringBoot實現後臺功能

    /**
     * 上傳客戶EXCEL表格
     * @param file
     * @return 上傳成功信息
     * @throws IOException
     */
    @PostMapping("/uploadClient")
    public String testUpload(@RequestParam("file") MultipartFile file) throws IOException {
//        System.out.println("後臺文件上傳函數");
//        System.out.println("獲取到的文件名稱爲：" + file);
        String filePath = file.getOriginalFilename(); // 獲取文件的名稱
        filePath = "asset/" + filePath; // 這是文件的保存路徑，若是不設置就會保存到項目的根目錄

        BufferedOutputStream outputStream = new BufferedOutputStream(new FileOutputStream(filePath));

        outputStream.write(file.getBytes());
        outputStream.flush();
        outputStream.close();
        return "客戶資料上傳成功";
    }
View Code

 　　坑01：文件上傳時會出現跨域問題，最簡單的方法就是在後臺配置一個跨域配置，就是編寫一個類，而後在須要跨域的類中繼承這個類就能夠啦spring

　　　　　　參考博文：點擊前往npm

package cn.xiangxu.cq8x.configure;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * @author 王楊帥
 * @create 2018-03-22 15:51
 * @desc 跨域配置
 **/
@Configuration
public class CorsConfigure extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH")
                .allowCredentials(true).maxAge(3600);
    }
}
View Code 
package cn.xiangxu.cq8x.controller;

import cn.xiangxu.cq8x.configure.CorsConfigure;
import cn.xiangxu.cq8x.dao.ClientDao;
import cn.xiangxu.cq8x.model.dataModel.ClientInfoModel;
import cn.xiangxu.cq8x.model.viewModel.ResultViewModel;
import cn.xiangxu.cq8x.service.ClientService;
import cn.xiangxu.cq8x.util.ResultViewUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import java.io.BufferedOutputStream;
import java.io.FileOutputStream;
import java.io.IOException;

/**
 * @author 王楊帥
 * @create 2018-03-06 20:36
 * @desc 客戶信息控制層接口
 **/
@RestController
@RequestMapping(value = "/client")
@CrossOrigin
public class ClientController extends CorsConfigure {

    @Resource(name = "clientService")
    private ClientService clientService;

    /**
     * 查詢全部的客戶信息
     * @return
     */
    @GetMapping(value = "/findAll")
    public ResultViewModel findAll(
            @RequestParam(value = "page", required = false, defaultValue = "0") Integer page,
            @RequestParam(value = "size", required = false, defaultValue = "3") Integer size
    ) {
        Pageable pageable = PageRequest.of(page, size);
        System.out.println(pageable);
        return ResultViewUtil.success(clientService.findAll(pageable));
    }

    /**
     * 根據姓名查詢客戶信息
     * @param name 從路徑中獲取參數
     * @return
     */
    @GetMapping(value = "/findByName02/{name}")
    public ResultViewModel findByName02(
            @PathVariable("name") String name
    ) {
        System.out.println("前端傳過來的目標客戶姓名爲：" + name);
        return ResultViewUtil.success(clientService.findByName(name));
    }

    /**
     * 根據姓名查詢客戶信息
     * @param name 從query中獲取參數
     * @return
     */
    @GetMapping(value = "/findByName")
    public ResultViewModel findByName(
            @RequestParam("name") String name
    ) {
        System.out.println("從前端獲取到的參數爲：" + name);
        return ResultViewUtil.success(clientService.findByName(name));
    }

    /**
     * 根據姓名進行模糊查詢
     * @param name
     * @return
     */
    @GetMapping(value = "/findByNameLike/{name}")
    public ResultViewModel findByNameLike(
            @PathVariable("name") String name
    ) {
        System.out.println("前端傳過來的模糊查詢信息爲 ：" + name);
        return ResultViewUtil.success(clientService.findByNameLike(name));
    }

    /**
     * 根據idcard查詢客戶信息
     * @param idcard 從路徑中獲取參數
     * @return
     */
    @GetMapping(value = "/findByIdcard02/{idcard}")
    public ResultViewModel findByIdcard02(
            @PathVariable("idcard") String idcard
    ) {
        System.out.println("前端傳過來的客戶證件號碼爲：" + idcard);
        return ResultViewUtil.success(clientService.findByIdcard(idcard));
    }

    /**
     * 根據idcard查詢客戶信息
     * @param idcard 從query中獲取參數
     * @return
     */
    @GetMapping(value = "/findByIdcard")
    public ResultViewModel findByIdcard(
            @RequestParam("idcard") String idcard
    ) {
        System.out.println("從前端獲取到的參數爲：" + idcard);
        return ResultViewUtil.success(this.clientService.findByIdcard(idcard));
    }

    /**
     * 新增客戶
     * @param clientInfoModel
     * @return
     */
    @PostMapping(value = "/create")
    public ResultViewModel create(
            @RequestBody ClientInfoModel clientInfoModel
    ) {
        return ResultViewUtil.success(this.clientService.createNewClient(clientInfoModel));
    }

    @PutMapping(value = "/update")
    public ResultViewModel update(
            @RequestBody ClientInfoModel clientInfoModel
    ) {
        System.out.println(clientInfoModel);
        return ResultViewUtil.success(this.clientService.updateClient(clientInfoModel));
    }

    @CrossOrigin
    @PostMapping(value = "/upload")
    public String upload(@RequestParam("file") MultipartFile file) throws IOException {
//        System.out.println("後臺文件上傳函數");
        System.out.println("獲取到的文件名稱爲：" + file);
        String filePath = file.getOriginalFilename(); // 獲取文件的名稱
        filePath = "G:/" + filePath; // 這是文件的保存路徑，若是不設置就會保存到項目的根目錄

        BufferedOutputStream outputStream = new BufferedOutputStream(new FileOutputStream(filePath));

        outputStream.write(file.getBytes());
        outputStream.flush();
        outputStream.close();

        return "客戶資料上傳成功";
    }


    @GetMapping(value = "/test")
    public ResultViewModel test(
            @RequestParam("id") Integer id
    ) {
        return ResultViewUtil.success("這是一個測試接口");
    }

    @PutMapping(value = "/test02")
    public ResultViewModel test02(
            @RequestParam(value = "page", required = false, defaultValue = "0") Integer page,
            @RequestParam(value = "size", required = false, defaultValue = "3") Integer size
    ) {
        System.out.println("獲取到的參數page爲：" + page);
        System.out.println("獲取到的參數size爲：" + size);
        return ResultViewUtil.success("PUT方法的參數問題");
    }



}
View Code

 

·下面是個人公衆號二維碼，歡迎關注·跨域

尋渝記服務器

微信號：xyj_fury微信

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程