springboot + vue + FastDFS实现文件上传（支持预览）

准备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实现文件上传（支持预览）相关推荐

uploadify java 下载_uploadify java实现多文件上传和预览
本文实例为大家分享了java文件上传和预览实现代码,供大家参考,具体内容如下 1.下载uploadify插件 2.index.html #uploader { position: relative; ...
php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
php案例文件上传并预览
作者:陈业贵华为云享专家 51cto(专家博主明日之星 TOP红人) 阿里云专家博主文章目录前言代码 cyg.php 2.php 效果:也就是上传的文件里面的内容前言 php案例文件上传 ...
SpringBoot+Vue+ElementUI实现文件上传与文件下载
作者: Memory(星哥) Wechat:/QQ: 574373426 整理不易,感谢支持,欢迎收藏转发分享专注IT职业教育多年,学编程找星哥 SpringBoot+Vue+ElementU ...
SpringBoot+Vue表单文件上传
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8281181 ...
servlet实现文件上传，预览，下载和删除
一.准备工作 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数据转 ...
javascript --- 文件上传即时预览闭包实现多图片即时预览
使用javascript原生功能实现,点击上传文件,然后再网页上显示出来 1. 初级显示 1.1 准备一个input标签和一个img标签 <input type=file id="fi ...
kl-uploads 多文件上传与预览的实现
功能描述多文件的上传,图片添加预览功能,非图片只有名称列表使用 <template><div class="demo"><klUploadhide ...
JQ input 文件上传并预览选择图片后,在页面上预览图片,页面渲染
有时候,我们更新界面信息时会遇到,选择图片后,并不能预览图片,必须提交数据库后才能在页面上显示出来,这样我们该怎样办呢? 起始jq为我们提供了两个方法change()和URL.createObject ...
微信小程序多图片上传支持预览删除设置数量上限
github地址: https://github.com/Volcano-Yang/miniprogram-picture-upload Miniprogram-Picture-Upload 努力帮助 ...

springboot + vue + FastDFS实现文件上传（支持预览）

准备FastDFS环境点击

准备springboot环境

Vue环境准备

springboot + vue + FastDFS实现文件上传（支持预览）相关推荐

最新文章

热门文章