
基于springboot+vue
前端vue:
<!-- 按钮:点击跳出弹框 -->
<div>
<el-button type="primary" size="mini" @click="upload.open = true">
系统自动生成简历
</el-button>
</div>
<!-- 弹框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" a***ept=".docx" :headers="upload.headers"
:action="upload.url" :disabled="upload.isUploading"
:on-progress="handleFileUploadProgress" :on-su***ess="handleFileSu***ess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许导入docx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
@click="importTemplate">下载模板
</el-link>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button @click="upload.open = false">取 消</el-button>
<el-button type="primary" @click="submitFileForm">确 定</el-button>
</div>
</el-dialog>
<!-- 用户导入参数 -->
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: '',
// 设置上传的请求头部
headers: {Authorization: "Bearer " + getToken()},
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/upload" //调用后端的接口
},
<!-- methods的方法-->
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSu***ess(response, file, fileList) {
if (response.code === 200){
this.form.fileNoteUrl = response.fileName
}
console.log(this.form.fileNoteUrl)
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
},
importTemplate() {
let fileName = '系统生成简历模板.docx';
//下载模板的地址
let url = "http://2024/12/11/716021d5-3132-4084-8ed2-0858d5cd505f.docx";
downloadFile(url, fileName);
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
后端Java:
//通用上传请求(单个)
public AjaxResult uploadFileForOss(HttpServletRequest request, MultipartFile file) {
String url = null;
try {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// 单个文件
MultipartFile myfile = multipartRequest.getFile("file");
log.info("上传文件:" + myfile != null ? myfile.getOriginalFilename() : null);
log.info("文件大小:"+myfile.getSize());
log.info("文件位置:"+myfile.getInputStream());
url = ossService.uploadFile(myfile); //上传文件至云存储
AjaxResult ajax = AjaxResult.su***ess();
ajax.put("url", url);
ajax.put("fileName", url);
ajax.put("newFileName", FileUtils.getName(url));
ajax.put("originalFilename", file.getOriginalFilename());
return ajax;
} catch (Exception e) {
e.printStackTrace();
return AjaxResult.error(e.getMessage());
}
}
// 上传文件至云存储
public String uploadFile(MultipartFile file) throws Exception {
// 填写存储桶(Bucket)所在地域对应的 endpoint 和 Region。
// 以华东 - 苏州为例,endpoint 填写 https://。。。。,Region 填写 w1。
String objectName = DateUtils.dateTimeNow("yyyy/MM/dd/") + file.getOriginalFilename();
// 创建 AmazonS3 实例。
// 创建 AmazonS3 实例。
AwsClientBuilder.EndpointConfiguration endpointConfiguration = new AwsClientBuilder.EndpointConfiguration(this.endpointEOS, this.regionEOS);
BasicAWSCredentials credentials = new BasicAWSCredentials(this.a***essKeyIdEOS, this.secretA***essKeyEOS);
AWSCredentialsProvider credentialsProvider = new AWSStati***redentialsProvider(credentials);
AmazonS3 client = AmazonS3ClientBuilder.standard()
.withEndpointConfiguration(endpointConfiguration)
.withPathStyleA***essEnabled(true)
.withCredentials(credentialsProvider).build();
// 上传 byte 数组。
byte[] data = file.getBytes();
client.putObject(this.bucketNameEOS, objectName, new ByteArrayInputStream(data), null);
//文件上传成功后设置文件的访问权限为公开读
client.setObjectAcl(this.bucketNameEOS, objectName, CannedA***essControlList.PublicRead);
return this.generateFullUrl(objectName);
}
/**
* 生成完整的文件地址
*
* @param objectName
* @return
*/
private String generateFullUrl(String objectName) {
String sb = a***essUrlEOS +
"/" +
objectName;
return sb;
}