<!--按钮-->
<el-button
v-if="node.data.type === '0'"
type="text"
size="mini"
@click="fileClick(node,data)">
<i class="el-icon-upload"></i>
</el-button>
<!--添加文件弹窗-->
<el-dialog :title="fileTitle" :visible.sync="fileShow" width="500px" append-to-body>
<el-upload
class="upload-demo"
action="url"
:before-upload="beforeFileUpload"
:multiple="false"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button @click="cancels">关 闭</el-button>
</div>
</el-dialog>
data() {
return {
/*文件相关*/
fileTitle: "上传文件",
fileShow: false,
fileList: [],
fileData: {},
upload: {
fileType: null,
fileName: null,
parentId: null,
}
};
},
//上传文件
export function addFileUpload(data) {
return request({
url: '/system/store/file/upload',
method: 'post',
data: data
})
}
methods: {
//上传方法
beforeFileUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) this.$notify.error({title: '错误', message: '上传头像图片大小不能超过 2MB!'});
let formData = new FormData();
formData.append("file", file);
formData.append("fileType", this.upload.fileType);
formData.append("parentId", this.upload.parentId);
formData.append("fileName", this.upload.fileName);
let name = file.name;
addFileUpload(formData).then(row => {
if (row.code == 200) {
this.fileList.push({name: name})
this.$notify({
title: '成功',
message: '上传成功',
type: 'success'
});
}
});
return false;
},
//上传文件
fileClick() {
this.fileShow = true;
},
}
后端
/**
* 上传文件资源
* @param file 文件
* @param fileType 文件类型 0 指令文件 1 模拟器资源
* @param fileName 放在那个文件夹下,文件夹名称
* @return
*/
@RequiresPermissions("remote:store:add")
@Log(title = "资源文件", businessType = BusinessType.INSERT)
@PostMapping("/file/upload")
public AjaxResult addUpload(@RequestParam("file") MultipartFile file,@RequestParam("fileType")String fileType,@RequestParam("fileName")String fileName,@RequestParam("parentId")String parentId){
return toAjax(ykFileStoreService.addUpload(file, fileType, fileName,parentId));
}
效果图