下面是详细的“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技术站
微信扫一扫 
支付宝扫一扫 