From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
components/js-uploadfile/js-uploadfile.vue | 296 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 296 insertions(+), 0 deletions(-)
diff --git a/components/js-uploadfile/js-uploadfile.vue b/components/js-uploadfile/js-uploadfile.vue
new file mode 100644
index 0000000..b8cf671
--- /dev/null
+++ b/components/js-uploadfile/js-uploadfile.vue
@@ -0,0 +1,296 @@
+<template>
+ <view class="u-flex-1">
+ <u-upload width="160" height="160" ref="uUpload"
+ :action="options.action"
+ :header="options.header"
+ :form-data="options.formData"
+ :name="options.name"
+ :max-count="maxCount"
+ :auto-upload="true"
+ :deletable="deletable"
+ :before-upload="beforeUpload"
+ @on-success="uploadSuccess"
+ @on-uploaded="uploadUploaded"
+ :before-remove="beforeRemove"
+ @on-remove="uploadRemove"
+ ></u-upload>
+ </view>
+</template>
+<script>
+import SparkMD5 from '@/common/spark-md5.js';
+/**
+ * 鏂囦欢涓婁紶缁勪欢缁勪欢
+ * @property {Object} value 浣跨敤 v-model="this.model" 鎸囧畾琛ㄥ崟鐨� model 瀵硅薄锛堝瓨鏀炬枃浠朵笂浼犵紪鍙蜂俊鎭級
+ * @property {String} bizKey 涓氬姟琛ㄧ殑涓婚敭鍊硷紙涓庨檮浠跺叧鑱旂殑涓氬姟鏁版嵁锛夈�愬彲閫夈�戝鏋滀笉璁剧疆锛屽垯鑾峰彇 value.id 浣滀负涓婚敭
+ * @property {String} bizType 涓氬姟琛ㄧ殑涓婁紶绫诲瀷锛堝叏缃戝敮涓�锛屾帹鑽愭牸寮忥細瀹炰綋鍚峗涓婁紶绫诲瀷锛屼緥濡傦紝鎰忚鍙嶉鍥剧墖锛歛ppComment_image锛�
+ * @property {String} uploadType 涓婁紶鏂囦欢绫诲瀷锛歩mage锛岀洰鍓嶇Щ鍔ㄧ浠呮敮鎸佷笂浼犲浘鐗�
+ * @property {String} imageMaxWidth 鍥剧墖鍘嬬缉锛屾渶澶у搴︼紙uploadType涓篿mage鐢熸晥锛夛紝璁剧疆-1浠ｈ〃涓嶅仛浠讳綍澶勭悊
+ * @property {String} imageMaxHeight 鍥剧墖鍘嬬缉锛屾渶澶у搴︼紙uploadType涓篿mage鐢熸晥锛夛紝璁剧疆-1浠ｈ〃涓嶅仛浠讳綍澶勭悊
+ * @property {String} maxCount 鏈�澶т笂浼犱釜鏁帮紝榛樿 52 涓紝濡傛灉璁剧疆涓� 0 鍙互褰撳仛銆愬彧璇绘ā寮忋�戜娇鐢�
+ * @example <js-uploadfile v-model="model.otherData" :biz-key="model.id" biz-type="testData_image"></js-uploadfile>
+ * @description Copyright (c) 2013-Now http://jeesite.com All rights reserved.
+ * @author ThinkGem
+ * @version 2021-3-11
+ */
+export default {
+ props: {
+ value: {
+ type: Object,
+ default() {
+ return {}
+ }
+ },
+ bizKey: {
+ type: String,
+ default: ''
+ },
+ bizType: {
+ type: String,
+ default: 'images'
+ },
+ uploadType: {
+ type: String,
+ default: 'image'
+ },
+ imageMaxWidth: {
+ type: [String, Number],
+ default: 1024
+ },
+ imageMaxHeight: {
+ type: [String, Number],
+ default: 768
+ },
+ maxCount: {
+ type: [String, Number],
+ default: 52
+ }
+ },
+ data() {
+ return {
+ options: {
+ value: {},
+ action: '',
+ header: {},
+ formData: {
+ fileMd5: '',
+ fileName: '',
+ bizKey: this.bizKey || (this.value && this.value.id) || '',
+ bizType: this.bizType,
+ uploadType: this.uploadType,
+ imageMaxWidth: this.imageMaxWidth,
+ imageMaxHeight: this.imageMaxHeight
+ },
+ name: 'file',
+ // 鏂囦欢涓婁紶鐨� id 鏁扮粍
+ fileUploadIds: [],
+ // 鏂囦欢鍒犻櫎鐨� id 鏁扮粍
+ fileUploadDelIds: []
+ },
+ deletable: true
+ };
+ },
+ watch: {
+ value(val, oldVal) {
+ this.options.value = val;
+ },
+ maxCount(val, oldVal) {
+ this.refreshStatus();
+ },
+ bizKey(val, oldVal) {
+ this.options.formData.bizKey = val;
+ this.loadData();
+ }
+ },
+ created() {
+ this.refreshStatus();
+ this.options.action = this.vuex_config.baseUrl + this.vuex_config.adminPath + '/file/upload';
+ this.options.formData = Object.assign(this.options.formData, this.formData);
+ this.loadData();
+ },
+ methods: {
+ // 鍒锋柊鏄惁鍙鐘舵��
+ refreshStatus(){
+ if (this.maxCount <= 0){
+ this.deletable = false;
+ }
+ },
+ // 宸蹭笂浼犵殑鏂囦欢鍥炴樉鍒颁笂浼犵粍浠�
+ loadData(){
+ if (this.options.formData.bizKey != ''){
+ let baseUrl = this.vuex_config.baseUrl;
+ let adminPath = this.vuex_config.adminPath;
+ this.$u.post(adminPath + '/file/fileList', {
+ bizKey: this.options.formData.bizKey,
+ bizType: this.options.formData.bizType,
+ }).then(res => {
+ let lists = [];
+ if (!(typeof res === 'object' && (res.result === 'login' || res.result === 'false'))){
+ for (let i in res){
+ let f = res[i];
+ lists.push({
+ url: baseUrl + f.fileUrl,
+ fileUploadId: f.id,
+ progress: 100,
+ error: false
+ });
+ }
+ }
+ // console.log(lists)
+ this.$refs.uUpload.lists = lists;
+ this.uploadRefreshIds(lists);
+ });
+ }
+ },
+ // 涓婁紶涔嬪墠锛岄獙璇佺浼犮�佹槸鍚︾户缁笂浼犵瓑
+ beforeUpload(index, lists) {
+ let self = this;
+ let item = lists[index];
+ let upload = this.upload;
+ let formData = this.options.formData;
+ let baseUrl = this.vuex_config.baseUrl;
+ let adminPath = this.vuex_config.adminPath;
+ self.$u.http.interceptor.request(this.options);
+ return new Promise((resolve, reject) => {
+ try{
+ function uploadFile(arrayBuffer){
+ let buffer = arrayBuffer;
+ let size = 10 * 1024 * 1024;
+ let spark = new SparkMD5.ArrayBuffer();
+ if (buffer.byteLength > size){
+ spark.append(buffer.slice(0, size));;
+ }else{
+ spark.append(buffer);
+ }
+ formData.fileEntityId = '';
+ formData.fileUploadId = '';
+ formData.fileMd5 = spark.end();
+ if (!item.file.name) {
+ item.file.name = item.url.split('/').pop();
+ }
+ formData.fileName = item.file.name;
+ // console.log('formData' + JSON.stringify(formData));
+ self.$u.post(adminPath + '/file/upload', formData).then(res => {
+ // console.log(res)
+ // 鏂囦欢宸茬粡涓婁紶锛屽惎鐢ㄧ浼�
+ if (res.result == 'true' && res.fileUpload){
+ item.fileUploadId = res.fileUpload.id;
+ item.progress = 100;
+ item.error = false;
+ reject(res);
+ }
+ // 鏂囦欢鏈笂浼犺繃锛岀户缁笂浼犳枃浠�
+ else if (res.fileUploadId && res.fileEntityId){
+ formData.fileUploadId = res.fileUploadId;
+ formData.fileEntityId = res.fileEntityId;
+ item.fileUploadId = res.fileUploadId;
+ resolve();
+ }
+ // 鏈煡閿欒锛屾彁绀烘湇鍔＄杩斿洖鐨勪俊鎭�
+ else {
+ uni.showModal({title: '鎻愮ず', content: res.message });
+ reject(res);
+ }
+ }).catch(err => {
+ console.error(err);
+ reject(err);
+ })
+ }
+ // #ifdef APP-PLUS
+ plus.io.requestFileSystem(plus.io.PRIVATE_WWW, function(fs){
+ fs.root.getFile(item.url, {create: false}, function(fileEntry){
+ fileEntry.file(function(file){
+ // console.log("getFile:" + JSON.stringify(file))
+ item.file.name = file.name;
+ var fileReader = new plus.io.FileReader();
+ fileReader.readAsText(file, 'utf-8');
+ fileReader.onloadend = function(evt) {
+ uploadFile(evt.target.result);
+ }
+ fileReader.onerror = function(error) {
+ reject(error);
+ }
+ }, reject);
+ }, reject);
+ } );
+ // #endif
+ // #ifdef MP
+ uni.getFileSystemManager().readFile({
+ filePath: item.url,
+ success(res) {
+ // console.log(res)
+ uploadFile(res.data);
+ },
+ fail(res) {
+ reject(res);
+ }
+ })
+ // #endif
+ // #ifdef H5
+ uni.request({
+ url: item.url,
+ responseType: 'arraybuffer',
+ complete: res => {
+ // console.log(res)
+ if (res.statusCode == 200) {
+ uploadFile(res.data);
+ }else{
+ reject(res);
+ }
+ }
+ })
+ // #endif
+ }catch(err){
+ console.error(err);
+ reject(err);
+ }
+ })
+ },
+ // 涓婁紶鎴愬姛涓�涓紝灏卞啓杩� fileUploadIds
+ uploadSuccess(data, index, lists, name){
+ let item = lists[index];
+ if (item.response && item.response.fileUpload) {
+ item.fileUploadId = item.response.fileUpload.id;
+ }
+ this.options.fileUploadIds.push(item.fileUploadId);
+ },
+ // 鍏ㄩ儴涓婁紶鍚庯紝鍒锋柊 fileUploadIds銆乫ileUploadDelIds
+ uploadUploaded(lists, name) {
+ this.uploadRefreshIds(lists);
+ },
+ // 绉婚櫎涔嬪墠鑾峰彇鍒犻櫎鐨� fileUploadId锛屽啓杩� fileUploadDelIds
+ beforeRemove(index, lists){
+ let item = lists[index];
+ if (item.fileUploadId){
+ this.options.fileUploadDelIds.push(item.fileUploadId);
+ }
+ return true;
+ },
+ // 绉婚櫎涔嬪悗锛屽埛鏂� fileUploadIds銆乫ileUploadDelIds
+ uploadRemove(index, lists){
+ this.uploadRefreshIds(lists);
+ },
+ // 鍒锋柊 fileUploadIds銆乫ileUploadDelIds
+ uploadRefreshIds(lists, name) {
+ let fileUploadIds = [];
+ lists.forEach(item => {
+ if (item.fileUploadId && item.progress == 100){
+ fileUploadIds.push(item.fileUploadId);
+ }
+ });
+ this.options.fileUploadIds = fileUploadIds;
+ // console.log('fileUploadIds', this.options.fileUploadIds)
+ // console.log('fileUploadDelIds', this.options.fileUploadDelIds)
+ // 灏嗕笂浼犲拰鍒犻櫎鐨� id 鍥炰紶缁� model
+ let formData = this.options.formData;
+ let fileParams = this.options.value || {};
+ fileParams[formData.bizType] = this.options.fileUploadIds.join(',');
+ fileParams[formData.bizType+'__del'] = this.options.fileUploadDelIds.join(',');
+ this.options.value = fileParams;
+ this.$emit('input', Object.assign(this.options.value, this.value));
+ },
+ }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>
--
Gitblit v1.9.3