Skip to content
GitLab
Commit 4614a9a3 authored by trumansdo's avatar trumansdo
Browse files

完成自定义文件组件，统一使用axios发起请求，使用方法：必须指定content-type为multipart/form-data

parent cc0c508e
Hide whitespace changes
Inline Side-by-side
plus-admin/admin-core/src/main/java/com/ibeetl/admin/core/web/FileSystemElContorller.java
View file @ 4614a9a3
package com.ibeetl.admin.core.web;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import com.ibeetl.admin.core.entity.CoreOrg;
import com.ibeetl.admin.core.entity.CoreUser;
......@@ -14,6 +13,7 @@ import java.io.OutputStream;
import java.net.URLEncoder;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import javax.validation.constraints.NotBlank;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
......@@ -52,14 +52,14 @@ public class FileSystemElContorller {
@PostMapping("/uploadAttachment")
@ResponseBody
public JsonResult<String> uploadFile(
@RequestParam("file") MultipartFile file, String fileBatchId, String bizType, String bizId)
@RequestParam("file") MultipartFile file,
@NotBlank String fileBatchId,
String bizType,
String bizId)
throws IOException {
if (file.isEmpty()) {
return JsonResult.fail();
}
if (StrUtil.isBlank(fileBatchId)) {
fileBatchId = IdUtil.fastUUID();
}
CoreUser user = platformService.getCurrentUser();
CoreOrg org = platformService.getCurrentOrg();
FileItem fileItem =
......@@ -78,7 +78,7 @@ public class FileSystemElContorller {
@PostMapping("/deleteAttachment")
@ResponseBody
public JsonResult deleteFile(Long fileId, String batchFileUUID) throws IOException {
public JsonResult deleteFile(Long fileId, String batchFileUUID) {
fileService.removeFile(fileId, batchFileUUID);
return JsonResult.success();
}
......
ve-admin/admin-web/package.json
View file @ 4614a9a3
......@@ -63,10 +63,12 @@
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"qs": "^6.9.1",
"screenfull": "4.2.0",
"showdown": "^1.9.1",
"sortablejs": "1.8.4",
"tui-editor": "1.3.3",
"uuid": "^7.0.2",
"vue": "2.6.11",
"vue-count-to": "1.0.13",
"vue-router": "3.1.6",
......
ve-admin/admin-web/src/api/file.js
View file @ 4614a9a3
/*
* @Author: 一日看尽长安花
* @since: 2020-03-16 11:16:52
* @LastEditTime: 2020-03-16 13:13:31
* @LastEditTime: 2020-03-19 21:04:54
* @LastEditors: 一日看尽长安花
* @Description:
*/
......
ve-admin/admin-web/src/components/GeneralPage/components/DetailPage.vue
View file @ 4614a9a3
<!--
* @Author: 一日看尽长安花
* @since: 2019-10-12 16:14:37
* @LastEditTime: 2020-03-17 15:46:23
* @LastEditTime: 2020-03-23 14:24:32
* @LastEditors: 一日看尽长安花
* @Description:
-->
......@@ -22,7 +22,7 @@
>
<div class="dialog-container">
<el-form
ref="editForm"
ref="editFormGP"
:rules="rules"
:model="dialogData"
label-position="right"
......@@ -132,7 +132,7 @@ export default {
return equalsIgnoreCase(str1, type);
},
createData() {
this.$refs['editForm'].validate(valid => {
this.$refs['editFormGP'].validate(valid => {
if (valid) {
this.$emit('create-data', this.dialogData);
this.$emit('update:dialogVisible', false);
......@@ -147,7 +147,7 @@ export default {
});
},
updateData() {
this.$refs['editForm'].validate(valid => {
this.$refs['editFormGP'].validate(valid => {
if (valid) {
this.$emit('update-data', this.dialogData);
this.$emit('update:dialogVisible', false);
......
ve-admin/admin-web/src/components/Upload/FileUpload.vue
View file @ 4614a9a3
<!--
* @Author: 一日看尽长安花
* @since: 2020-03-08 11:03:14
* @LastEditTime: 2020-03-17 20:54:30
* @LastEditTime: 2020-03-23 21:36:23
* @LastEditors: 一日看尽长安花
* @Description:
-->
......@@ -27,11 +27,11 @@
:list-type="listType"
:auto-upload="autoUpload"
:file-list="fileList_d"
:http-request="updateFiles"
:http-request="httpRequest"
:disabled="disabled"
:limit="limit"
:on-exceed="onExceed"
action="/core/file/uploadAttachment"
:action="action"
>
<template v-slot:default>
<slot name="default"> </slot>
......@@ -45,6 +45,8 @@
</el-upload>
</template>
<script>
import { v4 as uuidv4 } from 'uuid';
import request from '@/utils/request';
import { getFileList } from '@/api/file';
export default {
......@@ -63,6 +65,10 @@ export default {
type: String,
default: null
},
action: {
type: String,
default: '/core/file/uploadAttachment'
},
headers: {
type: Object,
default() {
......@@ -164,7 +170,8 @@ export default {
},
data() {
return {
fileList_d: this.fileList
fileList_d: this.fileList,
fileBatchId_d: this.fileBatchId
};
},
watch: {
......@@ -179,18 +186,43 @@ export default {
},
methods: {
loadFilelItems() {
if (!this.fileBatchId || this.fileBatchId.trim().length <= 0) {
if (!this.fileBatchId_d || this.fileBatchId_d.trim().length <= 0) {
this.fileList_d = [];
this.fileBatchId_d = uuidv4();
return;
}
getFileList({ fileBatchId: this.fileBatchId }).then(res => {
getFileList({ fileBatchId: this.fileBatchId_d }).then(res => {
const { code, data } = { ...res };
this.fileList_d = data || [];
});
},
updateFiles(params) {
debugger;
console.log(params);
httpRequest(uploadComponentParams) {
const options = uploadComponentParams;
let formData = new FormData();
if (options.data) {
Object.keys(options.data).forEach(key => {
formData.append(key, options.data[key]);
});
}
formData.append(options.filename, options.file, options.file.name);
formData.set('file-batch-id', this.fileBatchId_d);
formData.set('biz-id', this.data.bizId);
formData.set('biz-type', this.data.bizType);
formData.append('file-type', options.file.type);
return request({
url: options.action,
method: 'post',
timeout: undefined,
headers: {
'Content-Type': 'multipart/form-data;charset=utf-8'
},
data: formData,
onUploadProgress: progressEvent => {
const complete =
((progressEvent.loaded / progressEvent.total) * 100) | 0;
options.onProgress({ percent: complete });
}
}).then(options.onSuccess, options.onError);
}
}
};
......
ve-admin/admin-web/src/main.js
View file @ 4614a9a3
/*
* @Author: 一日看尽长安花
* @since: 2019-09-04 20:55:14
* @LastEditTime: 2020-03-11 16:00:50
* @LastEditTime: 2020-03-23 13:56:54
* @LastEditors: 一日看尽长安花
* @Description:
*/
......
ve-admin/admin-web/src/utils/request.js
View file @ 4614a9a3
......@@ -2,15 +2,32 @@
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-09 12:16:28
* @LastEditTime: 2020-03-08 15:59:43
* @LastEditTime: 2020-03-22 15:18:48
* @LastEditors: 一日看尽长安花
*/
import axios from 'axios';
import lodash from 'lodash';
import { MessageBox, Message } from 'element-ui';
import store from '@/store';
import { getToken, setToken } from '@/utils/auth';
import { toCamelCaseDeep } from '@/utils/object-util';
const defaultTransformRequest = axios.defaults.transformRequest[0];
axios.defaults.transformRequest = [
function(data, config) {
if (
config['Content-Type'] &&
lodash.startsWith(
config['Content-Type'].toLowerCase(),
'multipart/form-data'
)
)
return data;
return defaultTransformRequest(data, config);
}
];
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
......@@ -25,7 +42,10 @@ service.interceptors.request.use(
/**get方法为params，post、put、delete为data */
const params = config.params || config.data || null;
/**下划线转为驼峰 */
if (params) {
if (
params &&
Object.prototype.toString.call(params) !== '[object FormData]'
) {
const sourceParams = Object.assign({}, params);
const changedKeyParams = Object.assign(
{},
......@@ -37,9 +57,34 @@ service.interceptors.request.use(
} else {
config.data = changedKeyParams;
}
} else if (
params &&
Object.prototype.toString.call(params) === '[object FormData]'
) {
/**文件上传时使用formdata对象 */
const keys = [];
for (const k of params.keys()) {
keys.push(k);
}
for (const i in keys) {
const key = keys[i];
/*todo 可能的问题：参数未对数组做处理 */
const val = params.get(key);
if (!val || val === 'null' || val === 'undefined') {
params.delete(key);
continue;
}
if (Object.prototype.toString.call(val) === '[object File]') {
/**这里应该在补充一个blob对象的判断 */
params.set(lodash.camelCase(key), val, val.name);
} else {
params.set(lodash.camelCase(key), val);
}
}
config.data = params;
}
// do something before request is sent
if (store.getters.token) {
// do something before request is sent
// let each request carry token
// ['Authorization'] see to MDN explain about "HTTP Authorization"
// please modify it according to the actual situation
......
ve-admin/admin-web/src/views/users/index.vue
View file @ 4614a9a3
<!--
* @Author: 一日看尽长安花
* @since: 2019-10-12 15:43:18
* @LastEditTime: 2020-03-17 18:11:53
* @LastEditTime: 2020-03-23 14:27:26
* @LastEditors: 一日看尽长安花
* @Description:
-->
......@@ -377,11 +377,14 @@ export default {
});
},
submitUpload() {
debugger;
this.$refs.fileUpload.$refs.upload.submit();
},
onUploadSuccess(response, file, fileList) {
debugger;
const { code, message, data } = { ...response };
if (data) {
this.$children[0].$refs.detailPageGP.$props.dialogData.attachment_id =
response.data;
}
}
}
};
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment