elmentui+vue+springboot fastDfs文件上传（前端+后端整合直接上手）

import org.csource.fastdfs.*;

/**
 * fastDfs工具类
 */
public class FastDfsUtils {

    //从classpath：resources中的内容最终会编译到classpath下
    public static String CONF_FILENAME  = FastDfsUtils.class.getClassLoader()
            .getResource("fdfs_client.conf").getFile();


    /**
     * 上传文件
     * @param file
     * @param extName
     * @return
     */
    public static  String upload(byte[] file,String extName) {

        try {
            ClientGlobal.init(CONF_FILENAME);

            TrackerClient tracker = new TrackerClient();
            TrackerServer trackerServer = tracker.getConnection();
            StorageServer storageServer = null;

            StorageClient storageClient = new StorageClient(trackerServer, storageServer);

            String fileIds[] = storageClient.upload_file(file,extName,null);

            System.out.println(fileIds.length);
            System.out.println("组名：" + fileIds[0]);
            System.out.println("路径: " + fileIds[1]);
            //  /group1/M00/00/09/rBEACmKXF8-AUc6KAANsldwx3H4713.jpg
            return  "/"+fileIds[0]+"/"+fileIds[1];

        } catch (Exception e) {
            e.printStackTrace();
            return  null;
        }
    }
    /**
     * 上传文件
     * @param extName
     * @return
     */
    public static  String upload(String path,String extName) {

        try {
            ClientGlobal.init(CONF_FILENAME);

            TrackerClient tracker = new TrackerClient();
            TrackerServer trackerServer = tracker.getConnection();
            StorageServer storageServer = null;
            StorageClient storageClient = new StorageClient(trackerServer, storageServer);
            String fileIds[] = storageClient.upload_file(path, extName,null);

            System.out.println(fileIds.length);
            System.out.println("组名：" + fileIds[0]);
            System.out.println("路径: " + fileIds[1]);
            return  "/"+fileIds[0]+"/"+fileIds[1];

        } catch (Exception e) {
            e.printStackTrace();
            return  null;
        }
    }

    /**
     * 下载文件
     * @param groupName
     * @param fileName
     * @return
     */
    public static byte[] download(String groupName,String fileName) {
        try {

            ClientGlobal.init(CONF_FILENAME);

            TrackerClient tracker = new TrackerClient();
            TrackerServer trackerServer = tracker.getConnection();
            StorageServer storageServer = null;

            StorageClient storageClient = new StorageClient(trackerServer, storageServer);
            byte[] b = storageClient.download_file(groupName, fileName);
            return  b;
        } catch (Exception e) {
            e.printStackTrace();
            return  null;
        }
    }


    /**
     * 删除文件
     * @param groupName
     * @param fileName
     */
    public static void delete(String groupName,String fileName){
        try {
            ClientGlobal.init(CONF_FILENAME);

            TrackerClient tracker = new TrackerClient();
            TrackerServer trackerServer = tracker.getConnection();
            StorageServer storageServer = null;

            StorageClient storageClient = new StorageClient(trackerServer, storageServer);
            int i = storageClient.delete_file(groupName,fileName);
            System.out.println( i==0 ? "删除成功" : "删除失败:"+i);
        } catch (Exception e) {
            e.printStackTrace();
            throw  new RuntimeException("删除异常,"+e.getMessage());
        }
    }

}

@RestController
@RequestMapping("/fastdfs")
public class FastDfsController {
    /**
     * 文件上传
     * @return
     *
     * MultipartFile：复杂文件对象，专门用来接收文件的对象
     * RESTFUL风格要接收复杂文件对象要加上一个注解：@RequestPart
     */
    @PostMapping("/upload")
    public JsonResult file(@RequestPart("file") MultipartFile file) throws IOException {
        // 1.从复杂对象中获取到文件的byte数组
        byte[] bytes = file.getBytes();
        // 2.getOriginalFilename()：获取文件的原始名称
        String originalFilename = file.getOriginalFilename();

        // 3.利用coomonIo工具的方法获取到文件的后缀
        String extension = FilenameUtils.getExtension(originalFilename);
        // 4.调用上传工具上传文件
        String fileName = FastDfsUtils.upload(bytes, extension);
        // 5.响应文件名称
        return JsonResult.success(fileName);

    }
    @DeleteMapping("/delete")
    public JsonResult del(String path) throws IOException {
        // /group1/M00/00/2F/oYYBAGRxyKiAcRjaAA5Kws9ji_k408.gif
        path = path.substring(1);
        // 只要group
        String group = path.substring(0, path.indexOf("/"));
        // group1/M00/00/2F/oYYBAGRxyKiAcRjaAA5Kws9ji_k408.gif
        String fileName = path.substring(path.indexOf("/") + 1);
        // 4.调用上传工具上传文件
        FastDfsUtils.delete(group, fileName);
        // 5.响应文件名称
        return new JsonResult();
    }

}

导入依赖

        <!--fastdfs-->
        <dependency>
            <groupId>cn.bestwu</groupId>
            <artifactId>fastdfs-client-java</artifactId>
            <version>1.27</version>
        </dependency>

创建配置文件  fdfs_client.conf

tracker_server=service-file-primary.（直接去注册一个）:22122
#22122是tracker的端口 - 上传
#访问直接使用域名：123.207.27.208
#默认值为30s

这里使用的elmentui+vue

<el-form-item prop="字段" label="头像">
  <el-upload
      class="upload-demo"
      action="http://localhost:端口号/fastdfs/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :file-list="fileList"
      list-type="picture">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</el-form-item>

urls: "https://service-file-primary.（与配置文件一样）",

    handlePreview(file) {
      console.log("https://service-file-primary.（）" + file);
    },
        //文件上传的业务逻辑----到数据库
    handleSuccess(response, file, fileList) {

      // 处理图片headImg
      if (this.teacherForm.headImg) {//有值
        this.teacherForm.headImg = this.teacherForm.headImg + "," + response.data;
      } else {
        this.teacherForm.headImg = response.data;
      }
      //处理fileList:resources = xx,xx,xx
      this.fileList = [];//先清空 
      if (this.teacherForm.headImg) {
        let arr = this.teacherForm.headImg.split(",");//[xx,xx,xx]
        for (var i = 0; i < arr.length; i++) {
          this.fileList.push({"url": "https://service-file-primary.（）" + arr[i]});
        }
      }
    },
    //文件删除的业务逻辑
    handleRemove(file, fileList) {
      //1.调用删除接口删除fastdfs中的数据 :
      var url = file.url;
    
     
      var path = url.substring(url.indexOf("/group"));
      this.$http.delete("http://localhost:端口号/fastDfs?path=" + path).then(res => {
        if (res.data.success) {
          this.$message.success("删除成功!!!");
        } else {
          this.$message.success("删除失败!!!");
        }
      })
      //2.处理headImg
      if (this.teacherForm.headImg) { // xx,yy,zz
        let arr = this.teacherForm.headImg.split(","); //[xx,yy,zz]
        for (var i = 0; i < arr.length; i++) {
          if (path == arr[i]) {//找到了删除的图片
            arr.splice(i, 1);
            break;
          }
        }        
        this.teacherForm.headImg = arr.join(","); //xx,zz
      }
      //3.处理fileList
      this.fileList = [];//先清空 - 再添加最新的所有该宠物图片
      if (this.teacherForm.headImg) {
        let arr = this.teacherForm.headImg.split(",");//[xx,xx,xx]
        for (var i = 0; i < arr.length; i++) {
          this.fileList.push({"url": "http://service-file-primary.（）" + arr[i]});
        }
      }
    },