下面是详细的“vue+springboot+element+vue-resource实现文件上传教程”的完整攻略：

1. 前端实现

1.1. 安装vue-resource

npm install vue-resource --save

1.2. 引入element-ui

并引入element-ui中的el-upload组件来实现文件上传功能

import { Upload } from 'element-ui';
export default {
  components: {
    [Upload.name]: Upload,
  },
  data() {
    return {
      fileList: [], // 已上传的文件列表
    };
  },
  methods: {
    handleUpload(file) { // 上传前处理函数
      console.log(file);
      // TODO: 自定义处理
    },
    handleSuccess(res, file) { // 上传成功处理函数
      console.log(res);
      // TODO: 自定义处理
      this.fileList.push({ name: file.name, url: res.url });
    },
    handleRemove(file) { // 删除文件处理函数
      console.log(file);
      // TODO: 自定义处理
      for (let i = 0; i < this.fileList.length; ++i) {
        if (this.fileList[i].name === file.name) {
          this.fileList.splice(i, 1);
          break;
        }
      }
    },
  },
  template: `
    <div>
      <el-upload
        :action="your_upload_url"
        :file-list="fileList"
        :on-before-upload="handleUpload"
        :on-success="handleSuccess"
        :on-remove="handleRemove">
        <el-button>点击上传</el-button>
      </el-upload>
    </div>
  `,
};

2. 后端实现

2.1. 依赖添加

在pom.xml中加入以下dependency

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<dependency>
  <groupId>commons-io</groupId>
  <artifactId>commons-io</artifactId>
  <version>2.5</version>
</dependency>

2.2. 自定义上传方法

新建一个UploadController用于文件上传，示例代码如下：

import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

@RestController
@RequestMapping("/api/upload")
public class UploadController {

    @Value("${upload.path:/data/upload}")
    private String uploadPath;

    @PostMapping
    public Map<String, String> upload(@RequestParam("file") MultipartFile file) {
        Map<String, String> result = new HashMap<>();
        if (file.isEmpty()) {
            result.put("msg", "文件为空");
            return result;
        }
        String originalFilename = file.getOriginalFilename();
        if (StringUtils.isBlank(originalFilename)) {
            result.put("msg", "文件名为空");
            return result;
        }
        String newFilename = UUID.randomUUID() + "." + StringUtils.substringAfterLast(originalFilename, ".");
        File target = new File(uploadPath, newFilename);
        try {
            FileUtils.copyInputStreamToFile(file.getInputStream(), target);
            result.put("msg", "上传成功");
            result.put("url", "/api/uploads/" + newFilename);
        } catch (IOException e) {
            result.put("msg", "上传失败");
            e.printStackTrace();
        }
        return result;
    }
}

至此，我们已经成功实现了基于Vue、SpringBoot、Element UI和Vue Resource的文件上传功能，可以用自定义的处理逻辑来增加更多的功能。

示例1（将文件上传到fastdfs并返回file ID）：
前端：

const apiUrl = 'http://localhost:8080'; // 替换成自己的API地址
export default {
  methods: {
    handleUpload(file) { // 上传前处理函数
      console.log(file);
      // 上传到fastdfs
      let formData = new FormData();
      formData.append('file', file.raw);
      this.$http.post(`${apiUrl}/api/upload`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
        emulateJSON: true,
      }).then(response => {
        console.log(response.body);
        if (response.body.msg === '上传成功') {
          this.fileList.push({ name: file.name, url: `http://your_fastdfs_server/${response.body.url}` });
        } else {
          // 上传失败
        }
      }, response => {
        console.log(response.body);
      });
      return false;
    },
  },
};

后端：

import com.github.tobato.fastdfs.domain.fdfs.StorePath;
import com.github.tobato.fastdfs.service.FastFileStorageClient;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("/api/upload")
public class UploadController {

    @Autowired
    private FastFileStorageClient storageClient;

    @PostMapping
    public Map<String, String> upload(@RequestParam("file") MultipartFile file) {
        Map<String, String> result = new HashMap<>();
        if (file.isEmpty()) {
            result.put("msg", "文件为空");
            return result;
        }
        String originalFilename = file.getOriginalFilename();
        if (StringUtils.isBlank(originalFilename)) {
            result.put("msg", "文件名为空");
            return result;
        }
        StorePath storePath = null;
        try {
            storePath = storageClient.uploadFile(file.getInputStream(), file.getSize(), StringUtils.substringAfterLast(originalFilename, "."),
                    null);
            result.put("msg", "上传成功");
            result.put("url", storePath.getFullPath());
        } catch (IOException e) {
            result.put("msg", "上传失败");
            e.printStackTrace();
        }
        return result;
    }
}

示例2（限制上传的文件格式、大小）：
前端：

export default {
  methods: {
    handleUpload(file) { // 上传前处理函数
      console.log(file);
      const fileSizeLimit = 10 * 1024 * 1024; // 10MB
      const allowedExtensions = ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx']; // 允许上传的文件格式
      // 判断文件大小和格式
      if (file.size > fileSizeLimit) {
        console.warn('文件太大');
        return false;
      }
      if (allowedExtensions.indexOf(file.ext) < 0) {
        console.warn('文件格式不支持');
        return false;
      }
      // TODO: 自定义处理
      // 继续上传...
      return true;
    },
  },
};

后端：

@PostMapping
public Map<String, String> upload(@RequestParam("file") MultipartFile file) {
    Map<String, String> result = new HashMap<>();
    if (file.isEmpty()) {
        result.put("msg", "文件为空");
        return result;
    }
    String originalFilename = file.getOriginalFilename();
    if (StringUtils.isBlank(originalFilename)) {
        result.put("msg", "文件名为空");
        return result;
    }
    int fileSizeLimit = 10 * 1024 * 1024; // 10MB
    if (file.getSize() > fileSizeLimit) {
        result.put("msg", "文件太大");
        return result;
    }
    String[] allowedExtensions = { "pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx" }; // 允许上传的文件格式
    String fileExt = FilenameUtils.getExtension(originalFilename).toLowerCase();
    if (!ArrayUtils.contains(allowedExtensions, fileExt)) {
        result.put("msg", "文件格式不支持");
        return result;
    }
    // TODO: 上传文件
    result.put("msg", "上传成功");
    return result;
}

以上两个示例只是基于已有代码进行微调，更多的自定义逻辑可以通过以上代码实现。

希望这个攻略能够帮到你！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue+springboot+element+vue-resource实现文件上传教程 - Python技术站

vue+springboot+element+vue-resource实现文件上传教程