準備FastDFS環境點擊

準備springboot環境

pom.xml

<dependency><groupId>net.oschina.zcx7878</groupId><artifactId>fastdfs-client-java</artifactId><version>1.27.0.0</version></dependency>

新增配置文件fastdfs-client.properties

fastdfs.connect_timeout_in_seconds = 5 fastdfs.network_timeout_in_seconds = 30 fastdfs.charset = UTF-8 fastdfs.http_anti_steal_token = false fastdfs.http_secret_key = FastDFS1234567890 fastdfs.http_tracker_http_port = 80fastdfs.tracker_servers = 你的虛擬機端口ip:22122fastdfs.connection_pool.enabled = true fastdfs.connection_pool.max_count_per_entry = 500 fastdfs.connection_pool.max_idle_time = 3600 fastdfs.connection_pool.max_wait_time_in_ms = 1000

創建一個until類 FastUtils

package com.vue.until;import org.csource.common.MyException; import org.csource.fastdfs.ClientGlobal; import org.csource.fastdfs.StorageClient1; import org.csource.fastdfs.TrackerClient; import org.csource.fastdfs.TrackerServer; import org.springframework.web.multipart.MultipartFile;import java.io.IOException;/**** 文件上傳工具類*/ public class FastUtils {private static StorageClient1 client1 ;static {try {ClientGlobal.initByProperties("fastdfs-client.properties");TrackerClient trackerClient = new TrackerClient();TrackerServer trackerServer = trackerClient.getConnection();client1 = new StorageClient1(trackerServer, null);}catch (IOException e){e.printStackTrace();}catch (MyException e){e.printStackTrace();}}public static String upload(MultipartFile file){String oldName = file.getOriginalFilename();try {return client1.upload_file1(file.getBytes(),oldName.substring(oldName.lastIndexOf(".") + 1),null);}catch (IOException e){e.printStackTrace();}catch (MyException e){e.printStackTrace();}return null;}}

基于MVC設計模型，新增一個service服務層

package com.vue.serivce;import org.springframework.stereotype.Service; import org.springframework.web.multipart.MultipartFile;@Service public class UploadService {public String upload(MultipartFile file) {return null;} }

controller層 UploadController

package com.vue.contorller;import com.vue.serivce.UploadService; import com.vue.until.FastUtils; import com.vue.until.ResultEntity;import org.csource.common.NameValuePair; import org.csource.fastdfs.*; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest; import javax.swing.plaf.metal.MetalIconFactory; import java.io.File; import java.io.IOException; import java.io.InputStream;@RestController @RequestMapping("/upload") @CrossOrigin public class UploadController {@Autowiredprivate UploadService uploadService;@PostMapping("/import")public String importData(MultipartFile file, HttpServletRequest req) throws IOException {System.out.println("file = " + file);String realPath = req.getSession().getServletContext().getRealPath("/"); // file.transferTo(new File(realPath));System.out.println("realPath = " + realPath);String fileId = FastUtils.upload(file);String url = "http://192.168.56.10/" + fileId;System.out.println(url);return url;} }

測試上傳：

// 文件上傳@Testvoid testUpload() {try {ClientGlobal.initByProperties("fastdfs-client.properties");TrackerClient tracker = new TrackerClient();TrackerServer trackerServer = tracker.getConnection();StorageServer storageServer = null;StorageClient1 client = new StorageClient1(trackerServer, storageServer);NameValuePair nvp[] = null;//上傳到文件系統String fileId = client.upload_file1("C:\\Users\\think\\Documents\\1.pdf", "pdf",nvp); // logger.info(fileId);System.err.println(fileId); // Logger.g} catch (Exception e) {e.printStackTrace();}}

運行結果


測試文件下載功能

@Testvoid testDownload() {try {ClientGlobal.initByProperties("fastdfs-client.properties");TrackerClient tracker = new TrackerClient();TrackerServer trackerServer = tracker.getConnection();StorageServer storageServer = null;StorageClient1 client = new StorageClient1(trackerServer, storageServer);byte[] bytes = client.download_file1("group1/M00/00/00/wKg4CmEHlfKAJyKsAAY5stCGm7U909.pdf");FileOutputStream fos = new FileOutputStream(new File("C:\\Users\\think\\Desktop\\a.pdf"));fos.write(bytes);fos.close();} catch (Exception e) {e.printStackTrace();}}

Vue環境準備

Vue cli3.0 + Element ui（upload組件）

Upload.Vue

<template><div><el-uploadstyle="display: inline":show-file-list="true":on-success="onSuccess":on-error="onError":before-upload="beforeUpload"@click="isAcitve"action="http://localhost:8080/upload"><el-buttonsize="mini"type="success"@click="isAcitve":icon="uploadBtnIcon">上傳簡歷</el-button></el-upload><a @click="open_page">預覽頁面</a><div class="demo-fit"><div class="block" v-for="fit in fits" :key="fit"><span class="title">{{ fit }}</span><el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar></div></div></div> </template><script> export default {data() {return {enabledUploadBtn: true,uploadBtnIcon: 'el-icon-upload2',url: '',fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],};},methods: {onSuccess(response, file, fileList) {// window.location.href=responseconsole.log(file)console.log(fileList)alert(response);this.url = response;this.enabledUploadBtn = true;this.uploadBtnIcon = 'el-icon-upload2';this.btnText = '數據導入';},onError(err, file, fileList) {this.enabledUploadBtn = true;this.uploadBtnIcon = 'el-icon-upload2';this.btnText = '數據導入';},beforeUpload(file) {this.enabledUploadBtn = false;this.uploadBtnIcon = 'el-icon-loading';this.btnText = '正在導入';},open_page(){window.open(this.url)},isAcitve(){alert(1)return false}} }; </script><style> </style>

測試上傳

點擊預覽

總結

以上是生活随笔為你收集整理的springboot + vue + FastDFS实现文件上传（支持预览）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。