开课吧WEB第六期全栈架构师

文件管理服务提供通过http方式上传文件、删除文件、查询文件的功能，管理员通过文件管理服务队文件服务器上的文件进行管理

　　文件管理服务采用Spring Boot开发，文件管理服务通过与fastDFS交互最终将用户上传的文件存储到fastDFS上

1、建立实体类

/**
 * Created by 佳先森 on 2019/1/13.
 */
public class FileSystem {
    private String fileId;
    private String filePath;
    private long fileSize;
    private String fileName;
    private String fileType;
    //省去set/get
}

2、编写配置文件application.yml

server:
  port: 22100

fastdfs:
  #文件上传临时目录
  upload_location: E:\\download\\

3、建立controller

/**
 * Created by 佳先森 on 2019/1/13.
 */
@RestController
@RequestMapping("/filesystem")
public class FileServerController {

    @Value("${fastdfs.upload_location}")   //读取配置文件
    private String upload_location;

    @PostMapping("/upload")
    @ResponseBody
    public FileSystem upload(@RequestParam("file") MultipartFile file) throws IOException {
        //先将文件存储在web服务器上(本机),再使用fastDFS的client将文件到fastDFS服务器
        FileSystem fileSystem = new FileSystem();
        //得到文件的原始名称
        String originalFilename = file.getOriginalFilename();
        String extention = originalFilename.substring(originalFilename.lastIndexOf("."));
        //重构上传文件名
        String newFileName = UUID.randomUUID()+extention;
        //定义file，使用file存储上传的文件
        File file1 =new File(upload_location+newFileName);
        file.transferTo(file1);
        //获取新上传文件的物理路径
        String newFilePath = file1.getAbsolutePath();
        try {
            //加载fastDFS客户端的配置文件
            ClientGlobal.initByProperties("config/fastdfs-client.properties");
            System.out.println("network_timeout=" + ClientGlobal.g_network_timeout + "ms");
            System.out.println("charset=" + ClientGlobal.g_charset);

            //创建tracker的客户端
            TrackerClient tracker = new TrackerClient();
            TrackerServer trackerServer = tracker.getConnection();
            StorageServer storageServer = null;
            //定义storage的客户端
            StorageClient1 client = new StorageClient1(trackerServer, storageServer);
            //文件元数据(如文件名称大小等)
            NameValuePair[] metaList = new NameValuePair[1];
            metaList[0] = new NameValuePair("fileName",originalFilename);//这是个数组，可以继续添加
            //执行上传,将上传成功的存放在web服务器(本机)上的文件上传到fastDFS
            String fileId = client.upload_file1(newFilePath, extention, metaList);
            System.out.println("upload success. file id is: " + fileId);
            fileSystem.setFileId(fileId);
            fileSystem.setFilePath(fileId);
            fileSystem.setFileName(originalFilename);

            //通过调用service即dao将文件路径存储到数据库中
            //....todo


            //关闭trackerServer的连接
            trackerServer.close();
        } catch (Exception ex) {
            ex.printStackTrace();
        }
        return fileSystem;
    }
}

4、编写启动类

/**
 * Created by 佳先森 on 2019/1/13.
 */
@SpringBootApplication
public class FileServiceApplication {
    public static void main(String[] args) {
        SpringApplication.run(FileServiceApplication.class);
    }
}

5、编写前端界面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Upload</title>
</head>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<body>
    <div id="clj">
            <el-upload
      action=""
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
    </div>
<script type="text/javascript" src="vue.min.js"></script>
    <!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#clj',
        data: {
            dialogVisible: false,
            dialogImageUrl: ''
        },

　　　　　　methods: {
　　　　　　　　handlePictureCardPreview(file){　　　　　　#预览
　　　　　　　　this.dialogImageUrl ="http://192.168.174.128/"+file.response.filePath #注意：预览时访问的图片地址是通过nginx代理的，需要配置图片所在宿主机地址
　　　　　　　　this.dialogVisible = true;
　　　　　　},
　　　　　　　　handleRemove(){}
　　　　　　}

    })
</script>
</body>
</html>

6、nginx中配置页面访问路径

#图片服务测试(图片页面)
       server {
            listen      7283;
            server_name localhost;
            location / {
                root     /usr/java/javademo/springboot-vue-fastdfs/upload/;
                index   index.html;
            }
        }

此时访问http://192.168.174.128:7283/upload.html,若成功访问到页面，则配置成功

开课吧WEB第六期全栈架构师

但是这样远远不够的，因为页面中的action配置的请求后台的action是访问不到的，存在跨域问题(页面与后端代码不在同一台宿主机上)，解决跨域问题常见的思路就是在nginx中配置代理

 #图片服务测试(图片页面)
       server {
            listen      7283;
            server_name localhost;                                    #这里配置的是页面所在宿主机ip
            location / {
                root     /usr/java/javademo/springboot-vue-fastdfs/upload/;
                index   index.html;
            }
        location ^~ /filesystem/ {        #配置代理
                proxy_pass http://192.168.2.174:22100/filesystem/;    #注意这里配置的是后端代码所在宿主机ip
        }
        }

此时上传和预览功能已经完成

开课吧WEB第六期全栈架构师

开课吧WEB第六期全栈架构师

相关推荐