From c4df98c26cde5e7e4da0bf0b72e019a01a2386c7 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Sat, 16 Jul 2022 18:55:43 +0800
Subject: [PATCH] 实现图片文件管理 java 通讯
---
forms/imagePicker/CImagePicker.vue | 280 ++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 214 insertions(+), 66 deletions(-)
diff --git a/forms/imagePicker/CImagePicker.vue b/forms/imagePicker/CImagePicker.vue
index a69bd98..4d741be 100644
--- a/forms/imagePicker/CImagePicker.vue
+++ b/forms/imagePicker/CImagePicker.vue
@@ -14,9 +14,10 @@
/>
<AtImagePicker
ref="picker"
- multiple
mode="aspectFit"
- :count="9"
+ :multiple="count > 1"
+ :count="count"
+ :showAddBtn="!selectedFull"
:length="3"
:files="files"
:onChange="(files,operationType,index)=>handleChange(files,operationType,index)"
@@ -31,7 +32,9 @@
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import { AtInput, AtImagePicker, AtCurtain } from 'taro-ui-vue';
+import { $hostBoot } from '@components/bases/HostBoot';
import { $fetchCommon } from '@fetchers/FCommon';
+import { Tools } from '@components/common/Tools';
import CImageCompressor from './CImageCompressor.vue';
import './cImagePicker.scss';
@@ -48,12 +51,14 @@
itemRes: Object,
// 最大图片张数
count: {
- type: number,
- default: 9,
+ type: Number,
+ default: 1,
},
},
data() {
- return {};
+ return {
+ fileNames: {},
+ };
},
computed: {
files() {
@@ -64,25 +69,54 @@
} else if (Object.prototype.toString.call(value) === '[object Array]') {
files = value.map(url => ({ url }));
}
- files.push({ type: 'btn' });
return files;
+ },
+ selectedFull() {
+ return this.files.length >= this.count;
},
},
methods: {
- triggerChange(files) {
+ _triggerChange(files) {
const value = [];
files.forEach(file => {
- if (file.type === 'btn') {
- return;
- }
value.push(file.url);
+ // 记录原文件名
+ if (file.file && file.file.originalFileObj) {
+ this.fileNames[file.url] = file.file.originalFileObj.name;
+ }
});
this.itemRes.onChange(value);
},
handleChange(files, operationType, index) {
// 添加图片
if (operationType === 'add') {
- const needs = files
+ // 屏蔽其他格式
+ let nextFiles = files.filter(file => {
+ // 新添加
+ if (file.file && file.file.originalFileObj) {
+ if (
+ /image\/(gif|png|jpg|jpeg)/.test(
+ file.file.originalFileObj.type
+ )
+ ) {
+ return true;
+ } else {
+ Tools.toast('不支持的格式，请选择其他图片！');
+ return false;
+ }
+ }
+ // 非本次添加的图片
+ else {
+ return true;
+ }
+ });
+ // 限制数量
+ if (nextFiles.length > this.count) {
+ Tools.toast('最多只能选 ' + this.count + ' 张图片！');
+ nextFiles = nextFiles.splice(0, this.count);
+ }
+ // 检查是否需要压缩
+ const needs = nextFiles
.map((file, needIndex) => {
const fileInfo = file.file;
// 没有 file 信息对象，或者不是 blob 类型
@@ -98,7 +132,7 @@
.filter(Boolean);
// 存在需要压缩的图片，一次性压缩
if (needs.length > 0) {
- const files2 = [...files];
+ const files2 = [...nextFiles];
const needPaths = needs.map(need => need[0].path);
this.$refs.compressor.$compress(needPaths, compressedFiles => {
compressedFiles.forEach((cpPath, cpIndex) => {
@@ -107,17 +141,17 @@
url: cpPath.compress,
};
});
- this.triggerChange(files2);
+ this._triggerChange(files2);
});
}
// 不存在，直接显示
else {
- this.triggerChange(files);
+ this._triggerChange(nextFiles);
}
}
// 删除图片，直接显示
else {
- this.triggerChange(files);
+ this._triggerChange(files);
}
},
handleImgView(index, file) {
@@ -133,7 +167,6 @@
this.showImg = false;
},
handleFail(msg) {
- console.log(msg);
Taro.showToast({
title: msg,
icon: 'none',
@@ -142,63 +175,103 @@
});
},
$uploadImage(callback) {
- const url = $fetchCommon.getUploadImgURL();
- const uploadTeam = [];
- const imgs = [];
+ const files = [];
this.files.forEach(file => {
if (file.type === 'btn') {
return;
}
- // blob 临时文件才上传
- if (file.url.indexOf('blob') >= 0) {
- uploadTeam.push(
- new Promise((resolve, reject) => {
- Taro.uploadFile({
- url,
- filePath: file.url,
- name: 'file',
- formData: {},
- success(res) {
- const res2 =
- typeof res.data === 'string'
- ? JSON.parse(res.data)
- : res.data;
- if (res2.state.code === 2000) {
- resolve(
- $fetchCommon.transImgPath(
- 'fix',
- res2.data.src
- )
- );
- } else {
- reject({ message: res2.state.msg });
- }
- },
- cancel() {
- reject({ message: '上传图片已取消！' });
- },
- fail() {
- reject({ message: '上传图片失败！' });
- },
- });
- })
- );
- }
- // 其他类型视为 url，忽略
- else {
- uploadTeam.push(Promise.resolve(file.url));
- }
+ file.fileName = this.fileNames[file.url];
+ files.push(file);
});
- Promise.all(uploadTeam)
- .then(res => {
+ uploadImage(files, (state, res) => {
+ if (state === 'success') {
this.itemRes.onChange(res);
setTimeout(() => {
- callback('success');
- }, 0);
- })
- .catch(err => {
- callback('error', err);
- });
+ callback(state);
+ }, 10);
+ } else if (state === 'error') {
+ callback(state, res);
+ }
+ });
+ // let url = $fetchCommon.getUploadImgURL();
+ // if (url.indexOf('http') < 0) {
+ // url = $hostBoot.getHost() + url;
+ // }
+ // const uploadTeam = [];
+ // const imgs = [];
+ // this.files.forEach(file => {
+ // if (file.type === 'btn') {
+ // return;
+ // }
+ // // 临时文件才上传
+ // if (
+ // file.url.indexOf('blob') >= 0 ||
+ // file.url.indexOf('wxfile') >= 0 ||
+ // file.url.indexOf('http://tmp/') >= 0
+ // ) {
+ // let header = {};
+ // if (process.env.TARO_ENV === 'weapp') {
+ // const localCookies = JSON.parse(
+ // Taro.getStorageSync('cookies') || '{}'
+ // );
+ // const cookiesArr = [];
+ // Object.keys(localCookies).forEach(key => {
+ // cookiesArr.push(key + '=' + localCookies[key]);
+ // });
+ // header['Cookie'] = cookiesArr.join('; ');
+ // }
+ // uploadTeam.push(
+ // new Promise((resolve, reject) => {
+ // Taro.uploadFile({
+ // url,
+ // header,
+ // filePath: file.url,
+ // fileName: this.fileNames[file.url],
+ // name: 'file',
+ // formData: {},
+ // success(res) {
+ // const res2 =
+ // typeof res.data === 'string'
+ // ? JSON.parse(res.data)
+ // : res.data;
+ // if (res2.state.code === 2000) {
+ // resolve(
+ // $fetchCommon.transImgPath(
+ // 'fix',
+ // res2.data.src ||
+ // res2.data.file ||
+ // res2.data.url
+ // )
+ // );
+ // } else {
+ // reject({ message: res2.state.msg });
+ // }
+ // },
+ // cancel() {
+ // reject({ message: '上传图片已取消！' });
+ // },
+ // fail() {
+ // reject({ message: '上传图片失败！' });
+ // },
+ // });
+ // })
+ // );
+ // }
+ // // 其他类型视为 url，忽略
+ // else {
+ // uploadTeam.push(Promise.resolve(file.url));
+ // }
+ // });
+ // Promise.all(uploadTeam)
+ // .then(res => {
+ // this.itemRes.onChange(res);
+ // setTimeout(() => {
+ // callback('success');
+ // }, 0);
+ // })
+ // .catch(err => {
+ // callback('error', err);
+ // });
},
},
mounted() {
@@ -213,4 +286,79 @@
}
},
};
+
+export const uploadImage = (files, callback) => {
+ if (!files || files.length === 0) {
+ callback('success', []);
+ }
+ let url = $fetchCommon.getUploadImgURL();
+ if (url.indexOf('http') < 0) {
+ url = $hostBoot.getHost() + url;
+ }
+ const uploadTeam = [];
+ const imgs = [];
+ files.forEach(file => {
+ // 临时文件才上传
+ if (
+ file.url.indexOf('blob') >= 0 ||
+ file.url.indexOf('wxfile') >= 0 ||
+ file.url.indexOf('http://tmp/') >= 0
+ ) {
+ let header = {};
+ if (process.env.TARO_ENV === 'weapp') {
+ const localCookies = JSON.parse(Taro.getStorageSync('cookies') || '{}');
+ const cookiesArr = [];
+ Object.keys(localCookies).forEach(key => {
+ cookiesArr.push(key + '=' + localCookies[key]);
+ });
+ header['Cookie'] = cookiesArr.join('; ');
+ }
+ uploadTeam.push(
+ new Promise((resolve, reject) => {
+ Taro.uploadFile({
+ url,
+ header,
+ filePath: file.url,
+ fileName: file.fileName || '',
+ name: 'file',
+ formData: {},
+ success(res) {
+ const res2 =
+ typeof res.data === 'string'
+ ? JSON.parse(res.data)
+ : res.data;
+ if (res2.state.code === 2000) {
+ resolve(
+ $fetchCommon.transImgPath(
+ 'fix',
+ res2.data.src || res2.data.file || res2.data.url
+ )
+ );
+ } else {
+ reject({ message: res2.state.msg });
+ }
+ },
+ cancel() {
+ reject({ message: '上传图片已取消！' });
+ },
+ fail() {
+ reject({ message: '上传图片失败！' });
+ },
+ });
+ })
+ );
+ }
+ // 其他类型视为 url，忽略
+ else {
+ uploadTeam.push(Promise.resolve(file.url));
+ }
+ });
+ Promise.all(uploadTeam)
+ .then(res => {
+ callback('success', res);
+ })
+ .catch(err => {
+ callback('error', err);
+ });
+};
</script>
\ No newline at end of file
--
Gitblit v1.9.1