基于fastDFS和elementUI的文件上传（只要后端有数据，一通百通。）

基于elementUI和fastDFS的文件上传

只要数据传到后端，啥都好说，进不去白瞎，所以不管是fastDFS还是别的，一通百通（只是时间问题）

准备

		<dependency>
            <groupId>org.csource</groupId>
            <artifactId>fastdfs-client-java</artifactId>
            <version>1.27-SNAPSHOT</version>
        </dependency>

maven和pom对应关系解释

fastDFSmaven仓库地址
链接：https://pan.baidu.com/s/1-4C0wvPnm4-0Mqe_v9FS8w
提取码：q8si

后端

Controller

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 javax.annotation.Resource;

@RestController
@RequestMapping("/filesystem")
public class FileStoreController {

    @Resource
    private FlieStoreService flieStoreService;

    @PostMapping("/pictureUpload")
    public BaseResult pictureUpload(@RequestParam("file") MultipartFile multipartFile,
                             @RequestParam(value="filetag",required = true) String filetag,
                             @RequestParam(value="businesskey",required = false) String businesskey,
                             @RequestParam(value="metadata",required = false) String metadata) {

        return BaseResult.ok("",flieStoreService.pictureUpload(multipartFile, filetag, businesskey, metadata));
    }
}

Service

import org.csource.fastdfs.*;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;

@Service
@Transactional
public class FlieStoreService {


    public String pictureUpload(MultipartFile multipartFile, String filetag, String businesskey, String metadata) {
        // 返回的String 就是fastDFS的地址值 
        //端口号（在application.yml 文件中配置了） + s
        // 上传的是Word文档 192.168.200.133/group1/M00/00/00/wKjIhV872pqAMSWgAAAAAAAAAAA63.docx
        String s = fastUpload(multipartFile);
        return s;
    }

    private  String fastUpload(MultipartFile multipartFile) {
        initFdfsConfig();
        try {
            //定义tracker客户端
            TrackerClient trackerClient = new TrackerClient();
            //连接tracker
            TrackerServer trackerServer = trackerClient.getConnection();
            //获得存储器服务端
            StorageServer storageServer = trackerClient.getStoreStorage(trackerServer);
            //获得存储器客户端
            StorageClient1 storageClient1 = new StorageClient1(trackerServer, storageServer);


            //向stroage服务器上传文件
            int index = multipartFile.getOriginalFilename().lastIndexOf(".") + 1;
            String extName = multipartFile.getOriginalFilename().substring(index);
            //上传成功后拿到文件Id
            String  id= storageClient1.upload_file1(multipartFile.getBytes(), extName, null);
            return id;
        } catch (Exception e) {
            e.printStackTrace();
        }

        return null;
    }


    @Value("${yuyan.fastdfs.tracker_servers}")
    String tracker_servers;
    @Value("${yuyan.fastdfs.connect_timeout_in_seconds}")
    int connect_timeout_in_seconds;
    @Value("${yuyan.fastdfs.network_timeout_in_seconds}")
    int network_timeout_in_seconds;
    @Value("${yuyan.fastdfs.charset}")
    String charset;

    private void initFdfsConfig() {
        try {
            ClientGlobal.initByTrackers(tracker_servers);
            ClientGlobal.setG_charset(charset);
            ClientGlobal.setG_connect_timeout(connect_timeout_in_seconds);
            ClientGlobal.setG_network_timeout(network_timeout_in_seconds);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


}

application.yml

server:
  port: 7074
spring:
  application:
    name: filestore
  #SpringMVC上传文件配置
  servlet:
    multipart:
      #默认支持文件上传.
      enabled: true
      #支持文件写入磁盘.
      file-size-threshold: 0
      # 上传文件的临时目录
      location:
      # 最大支持文件大小
      max-file-size: 10MB
      # 最大支持请求大小
      max-request-size: 30MB
yuyan:
  fastdfs:
    connect_timeout_in_seconds: 5
    network_timeout_in_seconds: 80
    charset: UTF-8
    tracker_servers: 192.168.200.133:22122 #多个 trackerServer中间以逗号分隔

前端

vue页面 基于elementUI开发

				
<template>
  <div>
  	<el-upload
        //路径要对应上后端的枯井 最重要
        action="/api/filesystem/pictureUpload"
        list-type="picture-card"
        :before-upload="setuploaddata"
        :on-success="handleSuccess"
        :file-list="fileList"
        :limit="picmax"
        :on-exceed="rejectupload"
        :before-remove="handleRemove"
        :data="uploadval">
        <i class="el-icon-plus"></i>
  	</el-upload>
  </div>
</template>

<script>
  export default {
	data () {
      return {
        fileList: [],
        picmax: 1, // 最大上传文件的数量
        uploadval: { filetag: 'course' } // 上传提交的额外的数据 ，将uploadval转成key/value提交给服务器
      }
    },
    methods: {
       // 在上传前设置上传请求的数据
      setuploaddata() {

      },
      // 上传成功的钩子方法
      async handleSuccess(response, file, fileList) {
        // 调用课程管理的保存图片接口，将图片信息保存到课程管理数据库course_pic中
        // 从response得到新的图片文件的地址 response, file, fileList
        if (response.data) {
          this.setMeal.pictureid = response.data
        }
      },
      // 删除图片
      handleRemove(file, fileList) {
        console.log(file)
        // 调用服务端去删除课程图片信息，如果返回false，前端停止删除
        // 异步调用
        return new Promise((resolve, reject) => {})
      },
      // 超出文件上传个数提示信息
      rejectupload() {
        this.$message.error(`最多上传${this.picmax}个图片`)
      }
    }
  }
</script>

<style>

</style>

/ 异步调用
return new Promise((resolve, reject) => {})
},
// 超出文件上传个数提示信息
rejectupload() {
this.$message.error(‘最多上传${this.picmax}个图片`)
}
}
}