Vue+elementui前后端分離，單個圖片文件上傳和上傳時出現的跨域問題的解決方案

在后端解決跨域問題：

我是通過配置文件來解決跨域問題的

@Configuration
public class CorsConfig {//解決前后端分離的跨域問題！

    /**
     * cors support
     * @return
     */
    @Bean
    public FilterRegistrationBean corsFilter() {
        // 注冊CORS過濾器
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true); // 是否支持安全證書
        config.addAllowedOrigin("*"); // 允許任何域名使用
        config.addAllowedHeader("*"); // 允許任何頭
        config.addAllowedMethod("*"); // 允許任何方法（post、get等）
        // 預檢請求的有效期，單位為秒。
        //        config.setMaxAge(3600L);

        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }

下面看一下單個圖片的上傳過程：

先看一下前端的寫法：

auto-upload是否自動提交到頁面

accept是接受的圖片格式

:on-change是當前頁面改變時的回調方法

前端圖片上傳的方法：

解釋一下：

file是最新選擇的文件，filters是已經選擇過的文件。這里我只用到file

先對接收的圖片文件格式進行檢查，然后圖片大小也不能超過1.5M

構建一個formData表單來接收傳過去的數據，包括圖片文件本身，還有所要修改的用戶的id

 

前端代碼看完，看后端的接口

 

 要注意：這里MultipartFile的實例名稱要跟前端formData接收的圖片文件所寫的名稱一樣

 

 解釋一下：

getOriginalFilename()是傳過來的圖片文件的名稱，包含后綴！

AssertUtil.isTrue()方法 如果里面的條件是成立的，就拋出對應的自定義異常

注意上面的圖片存放位置，如果前端直接寫本地圖片的地址會報錯：

Not allowed to load local resource。因為springboot是內置的tomcat，瀏覽器為了安全起見是不能直接訪問本地資源的。
所以不能通過瀏覽器直接訪問本地資源，必須在前端頁面中拼的是一個網絡路徑而不是文件的本地路徑！

在application.yml配置文件配置虛擬的圖片映射路徑，如同畫圈部分！

 

 

最后在攔截器放行訪問圖片等靜態資源

 

 這樣就可以實現圖片的上傳啦！