vue上传图片到指定文件夹

vue代码
<template>
<div class="app-container">
<div class="wenben">
<el-upload
:disabled="dis==0?true:false"
class="upload-demo"
:action="uploadUrl"
:on-change="handleChange"
:on-error="uploadFileError"
:on-success="uploadFileSuccess"
:show-file-list="false"
:file-list="fileList"
:headers="headers"
name="files"
ref="upload"
v-loading.fullscreen.lock="loading"
element-loading-text="正在上传文件,请稍候......"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0,0,0,0.1)"
multiple
:limit="2"
:on-exceed="handleExceed">
<el-button size="small" type="primary" :disabled="dis==0?true:false">导入可见光图片</el-button>
</el-upload>
<span id="txt">未上传</span>
</div>
</div>
</template>
export default {
name: 'Pv',
// 定义数据
data() {
return {
uploadUrl: process.env.VUE_APP_BASE_API + "/system/pv/upload", // 上传的图片服务器地址
headers: {
Authorization: "Bearer " + getToken()
},
dis: 1,//1 可用 0 不可用
}
},
created() {
},
methods: {
handleChange(file, fileList) {
if (this.loading && this.num == fileList.length) {
this.num = 0;
this.files = []
this.loading = false;
} else {
this.loading = true;
this.files = fileList
document.getElementById('txt').innerHTML = '正在上传中...';
}
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 2 个文件，本次选择了 ${files.length} 个文件`);
},
//上传失败
uploadFileError(err, file, fileList) {
this.$message.error("上传失败！")
document.getElementById('txt').innerHTML = '未上传';
this.dis = 1;
},
//上传成功
uploadFileSuccess(res, file, fileList) {
this.dis = 0;
this.dis1 = 1;
this.files = []
this.num++;
this.$refs.upload.clearFiles();
this.kjlist.push(res.list[0]);
this.kjlist1.push(res.list1[0]);
document.getElementById('txt').innerHTML = '上传完成';
},
}
<style>
.wenben {
margin-top: 5px;
width: 150px;
float: left;
}
</style>

后端代码
@ResponseBody
@RequestMapping("upload")
public JSONObject upload(@RequestParam("files") MultipartFile[] files) throws Exception {
String path = filePath + "kj/";
List<String> list = new ArrayList<>();
List<String> list1 = new ArrayList<>();
try {
// 创建桶
minioConfig.makeBucket("guangfu");
// 设置桶读写权限
minioConfig.setBucketPolicy("guangfu", "read-write");
for (int i = 0; i < files.length; i++) {
String filename = files[i].getOriginalFilename();
// 新建文件
File filepath = new File(path, filename);
// 判断路径是否存在，如果不存在就创建一个
if (!filepath.getParentFile().exists()) {
filepath.getParentFile().mkdirs();
}
try {
// 写入文件
files[i].transferTo(new File(path + File.separator + filename));
File temp = new File(path, filename);
for (int j = 0; j < j + 1; j++) {
if (temp.exists()) {
break;
}
}
} catch (IOException e) {
e.printStackTrace();
}
String url = minioConfig.uploadFile("guangfu","kj/"+filename, path + filename);
list.add(path + filename);
list1.add(url);
}

} catch (Exception e) {
e.printStackTrace();
}
JSONObject jsonObject = new JSONObject();
jsonObject.put("list", list);
jsonObject.put("list1", list1);
return jsonObject;
}

 

参考文章：http://blog.ncmem.com/wordpress/2023/12/21/vue%e4%b8%8a%e4%bc%a0%e5%9b%be%e7%89%87%e5%88%b0%e6%8c%87%e5%ae%9a%e6%96%87%e4%bb%b6%e5%a4%b9/

欢迎入群一起讨论