zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

!3 UP 1.1.1 

Merge pull request !3 from sakuya/dev
This commit is contained in:
sakuya 2021-05-25 21:47:37 +08:00 committed by Gitee
parent a68c3201e9 9796077389
commit 5b1f33fb56
10 changed files with 93 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "SCUI-Admin",
"version": "1.1.0",
"version": "1.1.1",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",

14
src/api/index.js
View File

@ -10,6 +10,15 @@ import http from "@/utils/request";
*/
const api = {
default: {
upload: {
url: `${config.MOCK_URL}/upload`,
name: "文件上传",
post: async function(data){
return await http.post(this.url, data);
}
}
},
user: {
login: {
url: `${config.API_URL}/json/login.json`,
@ -105,7 +114,10 @@ const api = {
demo: {
upload: {
url: `${config.MOCK_URL}/upload`,
name: "文件上传接口"
name: "文件上传接口",
post: async function(data){
return await http.post(this.url, data);
}
},
select: {
url: `${config.API_URL}/json/select.json`,

7
src/components/scEditor/index.vue
View File

@ -11,6 +11,7 @@
<script>
import ClassicEditor from './build-classic/ckeditor.js';
import CKEditor from './ckeditor.js';
import uploadAdapter from "./uploadAdapter.js";
export default {
components: {
@ -50,9 +51,6 @@
},
table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties']
},
ckfinder: {
uploadUrl: 'https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api/upload'
}
}
}
@ -69,6 +67,9 @@
onReady(editor) {
const toolbarContainer = document.querySelector('.toolbar-container');
toolbarContainer.prepend(editor.ui.view.toolbar.element);
editor.plugins.get("FileRepository").createUploadAdapter = loader => {
return new uploadAdapter(loader);
};
},
onEditorInput() {
this.$emit('update:modelValue', this.value);

21
src/components/scEditor/uploadAdapter.js Normal file
View File

@ -0,0 +1,21 @@
import API from "@/api";
/**
* 自定义上传图片插件
*/
class MyUploadAdapter {
constructor(loader) {
this.loader = loader;
}
async upload() {
const data = new FormData();
data.append("file", await this.loader.file);
const res = await API.default.upload.post(data)
return {
default: res.data.src,
};
}
}
export default MyUploadAdapter;

20
src/components/scUpload/index.vue
View File

@ -8,7 +8,7 @@
<a v-else :href="img" class="file" target="_blank"><i class="el-icon-document"></i></a>
</div>
<div v-else class="sc-upload-uploader">
<el-upload ref="upload" class="uploader" :accept="accept" :action="action" :show-file-list="false" :before-upload="before" :on-success="success" :on-error="error">
<el-upload ref="upload" class="uploader" :accept="accept" :action="action" :show-file-list="false" :before-upload="before" :on-success="success" :on-error="error" :http-request="request">
<slot>
<div class="file-empty">
<i :class="icon"></i>
@ -22,12 +22,15 @@
</template>
<script>
import API from "@/api";
export default {
props: {
height: {type: Number, default: 120},
width: {type: Number, default: 120},
modelValue: { type: String, default: "" },
action: { type: String, default: "#" },
action: { type: String, default: "" },
apiObj: { type: Object, default: () => {} },
accept: { type: String, default: ".jpg, .png, .jpeg, .gif" },
maxSize: { type: Number, default: 10 },
title: { type: String, default: "" },
@ -103,6 +106,19 @@
},
del(){
this.img = ""
},
request(param){
var apiObj = API.default.upload;
if(this.apiObj){
apiObj = this.apiObj;
}
const data = new FormData();
data.append("file", param.file);
apiObj.post(data).then(res => {
param.onSuccess(res)
}).catch(err => {
param.onError(err)
})
}
}
}

20
src/components/scUpload/multiple.vue
View File

@ -22,7 +22,7 @@
</ul>
</div>
<div class="sc-upload-uploader">
<el-upload ref="upload" class="uploader" :action="action" :accept="accept" multiple :show-file-list="false" :file-list="defaultFileList" :before-upload="before" :on-progress="progress" :on-success="success" :on-change="change" :on-remove="remove" :on-error="error">
<el-upload ref="upload" class="uploader" :action="action" :accept="accept" multiple :show-file-list="false" :file-list="defaultFileList" :before-upload="before" :on-progress="progress" :on-success="success" :on-change="change" :on-remove="remove" :on-error="error" :http-request="request">
<div class="file-empty">
<i :class="icon"></i>
<h4 v-if="title">{{title}}</h4>
@ -34,10 +34,13 @@
</template>
<script>
import API from "@/api";
export default {
props: {
modelValue: { type: String, default: "" },
action: { type: String, default: "#" },
action: { type: String, default: "" },
apiObj: { type: Object, default: () => {} },
accept: { type: String, default: ".jpg, .png, .jpeg, .gif" },
maxSize: { type: Number, default: 10 },
title: { type: String, default: "" },
@ -144,6 +147,19 @@
},
del(index){
this.fileList.splice(index, 1);
},
request(param){
var apiObj = API.default.upload;
if(this.apiObj){
apiObj = this.apiObj;
}
const data = new FormData();
data.append("file", param.file);
apiObj.post(data).then(res => {
param.onSuccess(res)
}).catch(err => {
param.onError(err)
})
}
}
}

3
src/config/index.js
View File

@ -3,7 +3,7 @@ const DEFAULT_CONFIG = {
APP_NAME: "SCUI",
//版本号
APP_VER: "1.1.0",
APP_VER: "1.1.1",
//接口地址
API_URL: "",
@ -25,7 +25,6 @@ const DEFAULT_CONFIG = {
[]
]
}
}
// 如果生产模式，就合并动态的APP_CONFIG

1
src/utils/request.js
View File

@ -8,6 +8,7 @@ axios.defaults.timeout = 10000
// HTTP request 拦截器
axios.interceptors.request.use(
(config) => {
config.headers['Authorization'] = "SCUI-Demo-Auth"
return config;
},
(error) => {

7
src/views/home/components/C2.vue
View File

@ -22,6 +22,13 @@
data() {
return {
activities: [
{
content: [
"[优化] 上传组件上传行为",
"[优化] 富文本上传行为",
],
timestamp: '2021-05-25'
},
{
content: [
"[优化] 重构上传组件",

14
src/views/vab/upload.vue
View File

@ -2,9 +2,9 @@
<el-main>
<el-card shadow="never" header="基础示例">
<sc-upload v-model="imgurl" :action="uploadUrl"></sc-upload>
<sc-upload v-model="imgurl2" title="自定义标题" icon="el-icon-picture-outline" :action="uploadUrl"></sc-upload>
<sc-upload v-model="imgurl3" :action="uploadUrl" accept=".xls,.xlsx" :on-success="success" :width="220">
<sc-upload v-model="imgurl"></sc-upload>
<sc-upload v-model="imgurl2" title="自定义标题" icon="el-icon-picture-outline"></sc-upload>
<sc-upload v-model="imgurl3" :apiObj="uploadApi" accept=".xls,.xlsx" :on-success="success" :width="220">
<div class="custom-empty">
<i class="el-icon-upload"></i>
<p>自定义插槽</p>
@ -17,17 +17,17 @@
<el-form-item label="身份证" class="imglist" required>
<el-col>
<el-form-item prop="img1">
<sc-upload v-model="form.img1" title="人像面" :action="uploadUrl"></sc-upload>
<sc-upload v-model="form.img1" title="人像面"></sc-upload>
</el-form-item>
</el-col>
<el-col>
<el-form-item prop="img2">
<sc-upload v-model="form.img2" title="国徽面" :action="uploadUrl"></sc-upload>
<sc-upload v-model="form.img2" title="国徽面"></sc-upload>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="其他凭证" prop="img3">
<sc-upload-multiple v-model="form.img3" :action="uploadUrl"></sc-upload-multiple>
<sc-upload-multiple v-model="form.img3"></sc-upload-multiple>
</el-form-item>
<el-form-item label="日期" prop="date">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date"></el-date-picker>
@ -47,7 +47,7 @@
name: 'upload',
data() {
return {
uploadUrl: this.$API.demo.upload.url,
uploadApi: this.$API.demo.upload,
imgurl: "images/avatar.jpg",
imgurl2: "",
imgurl3: "",