国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前后分離文件上傳

cheukyin / 1362人閱讀

摘要:當(dāng)時(shí)想的是用免費(fèi)的第三方云存儲(chǔ)解決方案,畢竟之前已經(jīng)用過(guò)了七牛云。但是問(wèn)題來(lái)了,免費(fèi)的云存儲(chǔ),老是出問(wèn)題。所以你如果自己玩,完全可以使用免費(fèi)的云存儲(chǔ),要是真的商用,就考慮付費(fèi)產(chǎn)品。

最近在做一個(gè)基于Flutter的app,算是學(xué)習(xí)新的移動(dòng)端開(kāi)發(fā)技術(shù)。于是就需要一個(gè)后端api接口,其中涉及到了文件上傳,特此記錄下
1.為什么自己寫文件上傳

本來(lái)我計(jì)劃的是,后臺(tái)只做數(shù)據(jù)接口,不做文件存儲(chǔ),畢竟自己也沒(méi)那么多的服務(wù)器資源去存儲(chǔ)。當(dāng)時(shí)想的是用免費(fèi)的第三方云存儲(chǔ)解決方案,畢竟之前已經(jīng)用過(guò)了七牛云。

但是問(wèn)題來(lái)了,免費(fèi)的云存儲(chǔ),老是出問(wèn)題。比如七牛的,過(guò)段時(shí)間就會(huì)發(fā)現(xiàn),外鏈訪問(wèn)文件會(huì)失效,而且后臺(tái)文件管理面板,察看文件也看不了,很坑。

然后又看了有拍云,和騰訊云,它們提供的文件存儲(chǔ)都不收費(fèi),但是要后收費(fèi),當(dāng)你的文件存儲(chǔ)超過(guò)容量時(shí)收費(fèi)。這也還好,畢竟免費(fèi)的,存儲(chǔ)圖片的話5g也夠用了,但是主要是每天的流量由限制,超出流量收費(fèi)。你后期不得面臨你的應(yīng)用中的圖片全部不顯示,作為定位上線的應(yīng)用,是不能接受這種風(fēng)險(xiǎn)的。

所以你如果自己玩,完全可以使用免費(fèi)的云存儲(chǔ),要是真的商用,就考慮付費(fèi)產(chǎn)品。但是我又窮,所以只能自己寫了。

2 后端開(kāi)發(fā)(使用SpringBoot)

就不貼全部的項(xiàng)目代碼了,只貼上傳部分的。因?yàn)槭褂昧遂o態(tài)資源訪問(wèn),所以需要加入模板引擎依賴。


            org.springframework.boot
            spring-boot-starter-thymeleaf
        

因?yàn)榇a比較簡(jiǎn)單,所以直接controller全部處理完:

package com.mike.controller;

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.nio.file.StandardCopyOption;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.mike.bean.ApiResult;
import com.mike.bean.FileView;
import com.mike.util.ApiUtils;
import com.mike.util.Tools;

/**
 * The class UploadController
 */
@RestController
@RequestMapping("/up")
public class UploadController {
    
    @Value("${baseUrl}")
    private String baaseUrl;
    
    @CrossOrigin
    @PostMapping("/upload")
    public ApiResult uploadFile(@RequestParam("file") MultipartFile file){
        if (file.isEmpty()) {
            return ApiUtils.err("你沒(méi)有選擇上傳文件");
        } else if(file.getOriginalFilename().contains("..")||!file.getOriginalFilename().contains(".")){
            return ApiUtils.err("文件格式有誤");
        } else {
            String fileName = file.getOriginalFilename();
            //為防止文件名重復(fù)覆蓋
            fileName = fileName.replace(".", System.currentTimeMillis()+".");
            Path savePath = Paths.get("src/main/resources/static/upload");
            try {
                Files.copy(file.getInputStream(), savePath.resolve(fileName), StandardCopyOption.REPLACE_EXISTING);
                FileView view = new FileView();
                view.setName(fileName);
                view.setSize(file.getSize());
                view.setUrl(baaseUrl+fileName);
                view.setUploadDate(Tools.getCurrent());
                return ApiUtils.success(view);
            } catch (IOException e) {
                e.printStackTrace();
                return ApiUtils.err("對(duì)不起,上傳失敗");
            }
        }
    }
}

在高并發(fā)下,還是有非常小的幾率出現(xiàn)文件重名,所以使用時(shí)間戳也不是好的解決方案。需要能夠生成唯一識(shí)別符號(hào),建議使用UUId。

3 前端測(cè)試(使用jquery ajax)


  
    
    
  
  

     

     

      
        
  

效果:

訪問(wèn)上傳后的圖片url:

4 填坑

因?yàn)閳D片上傳導(dǎo)了代碼目錄,不是服務(wù)器的目錄,所以,新上傳得圖片訪問(wèn)會(huì)報(bào)404,需要重起才能訪問(wèn)。為了解決這個(gè)問(wèn)題,我們需要增加文件與路徑的映射關(guān)系,這樣,就不會(huì)出現(xiàn)404

public class FileConfig implements WebMvcConfigurer {
    
    @Value("${serverFilePath}")
    private String serverFilePath;
    
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        WebMvcConfigurer.super.addResourceHandlers(registry);
        registry.addResourceHandler("/upload/**")
                .addResourceLocations(serverFilePath);
    }
}

serverFilePath 在properties中配置:

baseUrl=http://localhost:8080/upload/
serverFilePath=file:C:/code/mike-todo/src/main/resources/static/upload/

上線的話,換成服務(wù)器上的路徑就好。

5 總結(jié)

文件存儲(chǔ),遠(yuǎn)遠(yuǎn)不像我寫的這么簡(jiǎn)單。只是應(yīng)付一般小項(xiàng)目足夠了,如果是大型的項(xiàng)目,就需要專門的文件存儲(chǔ)系統(tǒng)以及服務(wù)器端的優(yōu)化。如果你有什么問(wèn)題,可以留言要論。或是關(guān)注我的公眾號(hào):mike啥都想搞,還有其他教學(xué)視頻免費(fèi)領(lǐng)取。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/73776.html

相關(guān)文章

  • 前后分離文件上傳

    摘要:當(dāng)時(shí)想的是用免費(fèi)的第三方云存儲(chǔ)解決方案,畢竟之前已經(jīng)用過(guò)了七牛云。但是問(wèn)題來(lái)了,免費(fèi)的云存儲(chǔ),老是出問(wèn)題。所以你如果自己玩,完全可以使用免費(fèi)的云存儲(chǔ),要是真的商用,就考慮付費(fèi)產(chǎn)品。 最近在做一個(gè)基于Flutter的app,算是學(xué)習(xí)新的移動(dòng)端開(kāi)發(fā)技術(shù)。于是就需要一個(gè)后端api接口,其中涉及到了文件上傳,特此記錄下 1.為什么自己寫文件上傳 本來(lái)我計(jì)劃的是,后臺(tái)只做數(shù)據(jù)接口,不做文件存儲(chǔ),...

    AlexTuan 評(píng)論0 收藏0
  • 淺析前端上傳

    摘要:項(xiàng)目上也用到很多上傳文件的地方,七牛云,阿里云,訊飛上傳都接觸過(guò),所以在這里做一個(gè)記錄,總結(jié)一下前端上傳的幾種方式。類型的文件名七牛云上傳淺析是一個(gè)基于七牛開(kāi)發(fā)的前端。 showImg(https://segmentfault.com/img/bVbvibu?w=1920&h=1080); 圖片,音頻,視頻等等這幾種常見(jiàn)的資源類型,如果需要從前端上傳到服務(wù)端,有幾種方式呢?不妨回顧一下...

    terro 評(píng)論0 收藏0
  • 兩年了,我寫了這些干貨!

    摘要:開(kāi)公眾號(hào)差不多兩年了,有不少原創(chuàng)教程,當(dāng)原創(chuàng)越來(lái)越多時(shí),大家搜索起來(lái)就很不方便,因此做了一個(gè)索引幫助大家快速找到需要的文章系列處理登錄請(qǐng)求前后端分離一使用完美處理權(quán)限問(wèn)題前后端分離二使用完美處理權(quán)限問(wèn)題前后端分離三中密碼加鹽與中異常統(tǒng)一處理 開(kāi)公眾號(hào)差不多兩年了,有不少原創(chuàng)教程,當(dāng)原創(chuàng)越來(lái)越多時(shí),大家搜索起來(lái)就很不方便,因此做了一個(gè)索引幫助大家快速找到需要的文章! Spring Boo...

    huayeluoliuhen 評(píng)論0 收藏0
  • ONE-sys 整合前后端腳手架 koa2 + pm2 + vue-cli3.0 + element

    摘要:項(xiàng)目地址干貨求本腳手架主要致力于前端工程師的快速開(kāi)發(fā)一鍵部署等快捷開(kāi)發(fā)框架,主要目的是想讓前端工程師在一個(gè)阿里云服務(wù)器上可以快速開(kāi)發(fā)部署自己的項(xiàng)目。 項(xiàng)目地址https://github.com/fanshyiis/... 干貨!求star showImg(https://segmentfault.com/img/remote/1460000017886870); 本腳手架主要致力于...

    劉福 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<