上传组件和富文本图片上传全部调用API.JS

src/api/index.js

@@ -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`,

src/components/scEditor/index.vue

@@ -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);
@@ -97,7 +98,7 @@
 		border-top: 0;
 		resize: vertical;
 	}
-	
+
 	.content-container .ck-content {
 		margin: 0 auto;
 		background: #fff;

src/components/scEditor/uploadAdapter.js

@@ -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;

src/components/scUpload/index.vue

@@ -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)
+				})
 			}
 		}
 	}

src/components/scUpload/multiple.vue

@@ -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)
+				})
 			}
 		}
 	}

src/config/index.js

@@ -7,7 +7,7 @@ const DEFAULT_CONFIG = {
 
 	//接口地址
 	API_URL: "",
-	
+
 	//MOCK接口地址
 	MOCK_URL: "https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api",
 
@@ -25,7 +25,6 @@ const DEFAULT_CONFIG = {
 			[]
 		]
 	}
-
 }
 
 // 如果生产模式，就合并动态的APP_CONFIG

src/utils/request.js

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

src/views/vab/upload.vue

@@ -2,9 +2,9 @@
 	<el-main>
 
 		<el-card shadow="never" header="基础示例">
-			<sc-upload v-model="imgurl" :action="uploadUrl"></sc-upload>
+			<sc-upload v-model="imgurl"></sc-upload>
-			<sc-upload v-model="imgurl2" title="自定义标题" icon="el-icon-picture-outline" :action="uploadUrl"></sc-upload>
+			<sc-upload v-model="imgurl2" title="自定义标题" icon="el-icon-picture-outline"></sc-upload>
-			<sc-upload v-model="imgurl3" :action="uploadUrl" accept=".xls,.xlsx" :on-success="success" :width="220">
+			<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: "",