Skip to content

iBiz-Vue-Mob-R7-Res
iBiz-Vue-Mob-R7-Res
提交 212eeb04 编写于 作者: zcdtk's avatar zcdtk
浏览文件
操作

图片上传

上级 28ddd16e
隐藏空白字符变更
内嵌 并排
正在显示 包含 73 行增加 和 136 行删除
src/components/app-mob-file-upload/app-mob-file-upload.vue
浏览文件 @ 212eeb04
......@@ -30,6 +30,7 @@ import { Environment } from '@/environments/environment';
import { Subject, Unsubscribable } from 'rxjs';
import Axios from 'axios';
import qs from 'qs';
import { Loading } from '@/ibiz-core/utils';
import { Uploader } from 'vant';
......@@ -143,7 +144,9 @@ export default class AppMobFileUpload extends Vue {
'Content-Type': 'multipart/form-data'
}
}
Loading.show('上传中');
Axios.post(this.uploadUrl, params, config).then((response: any) => {
Loading.hidden();
if (response && response.data && response.status === 200) {
let data: any = response.data;
if (process.env.NODE_ENV === 'development') {
......@@ -156,6 +159,7 @@ export default class AppMobFileUpload extends Vue {
this.onError(response, file, this.files);
}
}).catch((response: any) => {
Loading.hidden();
this.onError(response, file, this.files);
});
}
......
src/components/app-mob-picture/app-mob-picture.vue
浏览文件 @ 212eeb04
......@@ -28,10 +28,13 @@ import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorat
import { Environment } from '@/environments/environment';
import { Subject, Unsubscribable } from 'rxjs';
import Axios from 'axios';
import { Plugins, CameraResultType,Capacitor } from '@capacitor/core';
import qs from 'qs';
import { Plugins, CameraResultType, Capacitor } from '@capacitor/core';
const { Camera } = Plugins;
import { Uploader } from 'vant';
import { Loading ,Util} from '@/ibiz-core/utils';
import { Loading, Util } from '@/ibiz-core/utils';
Vue.use(Uploader);
@Component({
components: {
......@@ -42,7 +45,7 @@ export default class AppMobPicture extends Vue {
/**
* 当前设备信息
*/
public platform :any;
public platform: any;
// MOB LOGIC BEGIN
/**
......@@ -76,7 +79,7 @@ export default class AppMobPicture extends Vue {
}
return false;
}
/**
* 开发模式文件数组
*
......@@ -102,7 +105,6 @@ export default class AppMobPicture extends Vue {
* @memberof AppMobPicture
*/
public onDelete(file: any, detail: any): void {
console.log(this.files,file);
this.onRemove({ id: file.id, name: file.name }, this.files);
}
......@@ -115,6 +117,7 @@ export default class AppMobPicture extends Vue {
* @memberof AppMobPicture
*/
public beforeRead(file: any, detail: any): boolean {
this.dataProcess();
if (file && Array.isArray(file)) {
this.$notify({ type: 'warning', message: '该功能只支持单个文件上传' });
return false;
......@@ -157,6 +160,14 @@ export default class AppMobPicture extends Vue {
}
// MOB LOGIC END
/**
* 是否支持多个上传
*
* @type {boolean}
* @memberof AppMobPicture
*/
@Prop({ default: true }) public multiple?: boolean;
/**
* 表单状态
*
......@@ -236,28 +247,36 @@ export default class AppMobPicture extends Vue {
@Prop() public disabled?: boolean;
/**
* 上传参数
* 视图上下文
*
* @type {string}
* @type {*}
* @memberof AppMobPicture
*/
@Prop() public uploadparams?: string;
@Prop({ default: {} }) context: any;
/**
* 下载参数
* 视图参数
*
* @type {string}
* @type {*}
* @memberof AppMobPicture
*/
@Prop({ default: {} }) viewparams: any;
/**
* 上传参数
*
* @type {*}
* @memberof AppMobPicture
*/
@Prop() public exportparams?: string;
@Prop({ default: {} }) uploadParam: any;
/**
* 自定义参数
* 下载参数
*
* @type {*}
* @memberof AppMobPicture
*/
@Prop() public customparams?: any;
@Prop({ default: {} }) exportParam: any;
/**
* 上传文件路径
......@@ -280,30 +299,6 @@ export default class AppMobPicture extends Vue {
*/
@Provide() public files: Array<any> = [];
/**
* 上传keys
*
* @type {Array<any>}
* @memberof AppMobPicture
*/
public upload_keys: Array<any> = [];
/**
* 导出keys
*
* @type {Array<any>}
* @memberof AppMobPicture
*/
public export_keys: Array<any> = [];
/**
* 自定义数组
*
* @type {Array<any>}
* @memberof AppMobPicture
*/
public custom_arr: Array<any> = [];
/**
* 应用参数
*
......@@ -319,21 +314,18 @@ export default class AppMobPicture extends Vue {
* @memberof AppMobPicture
*/
private dataProcess(): void {
let upload_arr: Array<string> = [];
let export_arr: Array<string> = [];
const _data: any = JSON.parse(this.data);
this.upload_keys.forEach((key: string) => {
upload_arr.push(`${key}=${_data[key]}`);
});
this.export_keys.forEach((key: string) => {
export_arr.push(`${key}=${_data[key]}`);
});
let _url = `${Environment.BaseUrl}${Environment.UploadFile}`;
if (upload_arr.length > 0 || this.custom_arr.length > 0) {
_url = `${_url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`;
const { context: uploadContext, param: uploadParam }
= this.$viewTool.doEditorItemParam(this.uploadParam, this.context, this.viewparams, JSON.parse(this.data));
const { context: exportContext, param: exportParam }
= this.$viewTool.doEditorItemParam(this.exportParam, this.context, this.viewparams, JSON.parse(this.data));
let _uploadUrl = `${Environment.BaseUrl}${Environment.UploadFile}`;
const uploadContextStr: string = qs.stringify(uploadContext, { delimiter: '&' });
const uploadParamStr: string = qs.stringify(uploadParam, { delimiter: '&' });
if (!Object.is(uploadContextStr, '') || !Object.is(uploadParamStr, '')) {
_uploadUrl = `${_uploadUrl}?${uploadContextStr}&${uploadParamStr}`;
}
this.uploadUrl = _url;
this.uploadUrl = _uploadUrl;
this.files.forEach((file: any) => {
if (process.env.NODE_ENV === 'development') {
......@@ -344,12 +336,15 @@ export default class AppMobPicture extends Vue {
}
return;
}
let url = `${this.downloadUrl}/${file.id}`;
if (upload_arr.length > 0 || this.custom_arr.length > 0) {
url = `${url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`;
let _downloadUrl = `${this.downloadUrl}/${file.id}`;
const exportContextStr: string = qs.stringify(exportContext, { delimiter: '&' });
const exportParamStr: string = qs.stringify(exportParam, { delimiter: '&' });
if (!Object.is(exportContextStr, '') || !Object.is(exportParamStr, '')) {
_downloadUrl = `${_downloadUrl}?${exportContextStr}&${exportParamStr}`;
}
file.isImage = true;
file.url = url;
file.url = _downloadUrl;
});
}
......@@ -365,11 +360,14 @@ export default class AppMobPicture extends Vue {
// 表单加载完成
if (Object.is($event.type, 'load')) {
if (this.value) {
// console.log(this.value);
this.files = JSON.parse(this.value);
}
this.dataProcess();
}
// 表单保存完成 和 表单项更新
if (Object.is($event.type, "save") || Object.is($event.type, "updateformitem")) {
this.dataProcess();
}
});
}
}
......@@ -381,26 +379,6 @@ export default class AppMobPicture extends Vue {
*/
public mounted() {
this.appData = this.$store.getters.getAppData();
let custom_arr: Array<string> = [];
let upload_keys: Array<string> = [];
let export_keys: Array<string> = [];
if (this.uploadparams && !Object.is(this.uploadparams, '')) {
upload_keys = this.uploadparams.split(';');
}
if (this.exportparams && !Object.is(this.exportparams, '')) {
export_keys = this.exportparams.split(';');
}
if (this.customparams && !Object.is(this.customparams, '')) {
Object.keys(this.customparams).forEach((name: string) => {
custom_arr.push(`${name}=${this.customparams[name]}`);
});
}
this.upload_keys = upload_keys;
this.export_keys = export_keys;
this.custom_arr = custom_arr;
if (this.value) {
this.files = JSON.parse(this.value);
}
......@@ -428,18 +406,18 @@ export default class AppMobPicture extends Vue {
* @memberof AppMobPicture
*/
public getNearEle(ele: any, type: any) {
type = type == 1 ? "previousSibling" : "nextSibling";
var nearEle = ele[type];
while (nearEle) {
if (nearEle.nodeType === 1) {
return nearEle;
}
nearEle = nearEle[type];
if (!nearEle) {
break;
type = type == 1 ? "previousSibling" : "nextSibling";
var nearEle = ele[type];
while (nearEle) {
if (nearEle.nodeType === 1) {
return nearEle;
}
nearEle = nearEle[type];
if (!nearEle) {
break;
}
}
}
return null;
return null;
}
/**
......@@ -453,16 +431,6 @@ export default class AppMobPicture extends Vue {
}
}
/**
* 上传之前
*
* @param {*} file
* @memberof AppMobPicture
*/
public beforeUpload(file: any) {
// console.log('上传之前');
}
/**
* 上传成功回调
*
......@@ -513,7 +481,6 @@ export default class AppMobPicture extends Vue {
arr.push({ name: f.name, id: f.id });
}
});
console.log(arr);
let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
......@@ -525,44 +492,10 @@ export default class AppMobPicture extends Vue {
* @memberof AppMobPicture
*/
public onDownload(file: any) {
this.dataProcess();
window.open(file.url);
}
/**
* 预览图片地址
*
* @type {string}
* @memberof AppMobPicture
*/
public dialogImageUrl: string = '';
/**
* 是否显示预览界面
*
* @type {boolean}
* @memberof AppMobPicture
*/
public dialogVisible: boolean = false;
/**
* 是否支持多个上传
*
* @type {boolean}
* @memberof AppMobPicture
*/
@Prop({ default: true }) public multiple?: boolean;
/**
* 预览
*
* @param {*} file
* @memberof AppMobPicture
*/
public onPreview(file: any) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
/**
* 原生相机上传事件
*
......@@ -576,9 +509,9 @@ export default class AppMobPicture extends Vue {
});
this.files.push({
id: Util.createUUID(),
name:image.webPath,
url:image.webPath,
isImage:true,
name: image.webPath,
url: image.webPath,
isImage: true,
});
let base = image.base64String;
this.$emit('formitemvaluechange', { name: this.name, value: this.files });
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或