|
|
@ -4,9 +4,18 @@ |
|
|
<text class="file-title">{{ title }}</text> |
|
|
<text class="file-title">{{ title }}</text> |
|
|
<text class="file-count">{{ filesList.length }}/{{ limitLength }}</text> |
|
|
<text class="file-count">{{ filesList.length }}/{{ limitLength }}</text> |
|
|
</view> |
|
|
</view> |
|
|
<upload-image v-if="fileMediatype === 'image' && showType === 'grid'" :readonly="readonly" |
|
|
<upload-image |
|
|
:image-styles="imageStyles" :files-list="filesList" :limit="limitLength" :disablePreview="disablePreview" |
|
|
v-if="fileMediatype === 'image' && showType === 'grid'" |
|
|
:delIcon="delIcon" @uploadFiles="uploadFiles" @choose="choose" @delFile="delFile"> |
|
|
:readonly="readonly" |
|
|
|
|
|
:image-styles="imageStyles" |
|
|
|
|
|
:files-list="filesList" |
|
|
|
|
|
:limit="limitLength" |
|
|
|
|
|
:disablePreview="disablePreview" |
|
|
|
|
|
:delIcon="delIcon" |
|
|
|
|
|
@uploadFiles="uploadFiles" |
|
|
|
|
|
@choose="choose" |
|
|
|
|
|
@delFile="delFile" |
|
|
|
|
|
> |
|
|
<slot> |
|
|
<slot> |
|
|
<view class="is-add"> |
|
|
<view class="is-add"> |
|
|
<view class="icon-add"></view> |
|
|
<view class="icon-add"></view> |
|
|
@ -14,30 +23,38 @@ |
|
|
</view> |
|
|
</view> |
|
|
</slot> |
|
|
</slot> |
|
|
</upload-image> |
|
|
</upload-image> |
|
|
<upload-file v-if="fileMediatype !== 'image' || showType !== 'grid'" :readonly="readonly" |
|
|
<upload-file |
|
|
:list-styles="listStyles" :files-list="filesList" :showType="showType" :delIcon="delIcon" |
|
|
v-if="fileMediatype !== 'image' || showType !== 'grid'" |
|
|
@uploadFiles="uploadFiles" @choose="choose" @delFile="delFile"> |
|
|
:readonly="readonly" |
|
|
|
|
|
:list-styles="listStyles" |
|
|
|
|
|
:files-list="filesList" |
|
|
|
|
|
:showType="showType" |
|
|
|
|
|
:delIcon="delIcon" |
|
|
|
|
|
@uploadFiles="uploadFiles" |
|
|
|
|
|
@choose="choose" |
|
|
|
|
|
@delFile="delFile" |
|
|
|
|
|
> |
|
|
<slot><button type="primary" size="mini">选择文件</button></slot> |
|
|
<slot><button type="primary" size="mini">选择文件</button></slot> |
|
|
</upload-file> |
|
|
</upload-file> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { |
|
|
import { |
|
|
chooseAndUploadFile, |
|
|
chooseAndUploadFile, |
|
|
uploadCloudFiles |
|
|
uploadCloudFiles, |
|
|
} from './choose-and-upload-file.js' |
|
|
} from "./choose-and-upload-file.js"; |
|
|
import { |
|
|
import { |
|
|
get_file_ext, |
|
|
get_file_ext, |
|
|
get_extname, |
|
|
get_extname, |
|
|
get_files_and_is_max, |
|
|
get_files_and_is_max, |
|
|
get_file_info, |
|
|
get_file_info, |
|
|
get_file_data |
|
|
get_file_data, |
|
|
} from './utils.js' |
|
|
} from "./utils.js"; |
|
|
import uploadImage from './upload-image.vue' |
|
|
import uploadImage from "./upload-image.vue"; |
|
|
import uploadFile from './upload-file.vue' |
|
|
import uploadFile from "./upload-file.vue"; |
|
|
let fileInput = null |
|
|
let fileInput = null; |
|
|
/** |
|
|
/** |
|
|
* FilePicker 文件选择上传 |
|
|
* FilePicker 文件选择上传 |
|
|
* @description 文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间 |
|
|
* @description 文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间 |
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=4079 |
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=4079 |
|
|
@ -78,184 +95,192 @@ |
|
|
* @event {Function} fail 上传失败触发 |
|
|
* @event {Function} fail 上传失败触发 |
|
|
* @event {Function} delete 文件从列表移除时触发 |
|
|
* @event {Function} delete 文件从列表移除时触发 |
|
|
*/ |
|
|
*/ |
|
|
export default { |
|
|
export default { |
|
|
name: 'uniFilePicker', |
|
|
name: "uniFilePicker", |
|
|
components: { |
|
|
components: { |
|
|
uploadImage, |
|
|
uploadImage, |
|
|
uploadFile |
|
|
uploadFile, |
|
|
}, |
|
|
}, |
|
|
options: { |
|
|
options: { |
|
|
virtualHost: true |
|
|
virtualHost: true, |
|
|
}, |
|
|
}, |
|
|
emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'input'], |
|
|
emits: [ |
|
|
|
|
|
"select", |
|
|
|
|
|
"success", |
|
|
|
|
|
"fail", |
|
|
|
|
|
"progress", |
|
|
|
|
|
"delete", |
|
|
|
|
|
"update:modelValue", |
|
|
|
|
|
"input", |
|
|
|
|
|
], |
|
|
props: { |
|
|
props: { |
|
|
// #ifdef VUE3 |
|
|
// #ifdef VUE3 |
|
|
modelValue: { |
|
|
modelValue: { |
|
|
type: [Array, Object], |
|
|
type: [Array, Object], |
|
|
default () { |
|
|
default() { |
|
|
return [] |
|
|
return []; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
// #endif |
|
|
// #endif |
|
|
|
|
|
|
|
|
// #ifndef VUE3 |
|
|
// #ifndef VUE3 |
|
|
value: { |
|
|
value: { |
|
|
type: [Array, Object], |
|
|
type: [Array, Object], |
|
|
default () { |
|
|
default() { |
|
|
return [] |
|
|
return []; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
// #endif |
|
|
// #endif |
|
|
|
|
|
|
|
|
disabled: { |
|
|
disabled: { |
|
|
type: Boolean, |
|
|
type: Boolean, |
|
|
default: false |
|
|
default: false, |
|
|
}, |
|
|
}, |
|
|
disablePreview: { |
|
|
disablePreview: { |
|
|
type: Boolean, |
|
|
type: Boolean, |
|
|
default: false |
|
|
default: false, |
|
|
}, |
|
|
}, |
|
|
delIcon: { |
|
|
delIcon: { |
|
|
type: Boolean, |
|
|
type: Boolean, |
|
|
default: true |
|
|
default: true, |
|
|
}, |
|
|
}, |
|
|
// 自动上传 |
|
|
// 自动上传 |
|
|
autoUpload: { |
|
|
autoUpload: { |
|
|
type: Boolean, |
|
|
type: Boolean, |
|
|
default: true |
|
|
default: true, |
|
|
}, |
|
|
}, |
|
|
// 最大选择个数 ，h5只能限制单选或是多选 |
|
|
// 最大选择个数 ，h5只能限制单选或是多选 |
|
|
limit: { |
|
|
limit: { |
|
|
type: [Number, String], |
|
|
type: [Number, String], |
|
|
default: 9 |
|
|
default: 9, |
|
|
}, |
|
|
}, |
|
|
// 列表样式 grid | list | list-card |
|
|
// 列表样式 grid | list | list-card |
|
|
mode: { |
|
|
mode: { |
|
|
type: String, |
|
|
type: String, |
|
|
default: 'grid' |
|
|
default: "grid", |
|
|
}, |
|
|
}, |
|
|
// 选择文件类型 image/video/all |
|
|
// 选择文件类型 image/video/all |
|
|
fileMediatype: { |
|
|
fileMediatype: { |
|
|
type: String, |
|
|
type: String, |
|
|
default: 'image' |
|
|
default: "image", |
|
|
}, |
|
|
}, |
|
|
// 文件类型筛选 |
|
|
// 文件类型筛选 |
|
|
fileExtname: { |
|
|
fileExtname: { |
|
|
type: [Array, String], |
|
|
type: [Array, String], |
|
|
default () { |
|
|
default() { |
|
|
return [] |
|
|
return []; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
title: { |
|
|
title: { |
|
|
type: String, |
|
|
type: String, |
|
|
default: '' |
|
|
default: "", |
|
|
}, |
|
|
}, |
|
|
listStyles: { |
|
|
listStyles: { |
|
|
type: Object, |
|
|
type: Object, |
|
|
default () { |
|
|
default() { |
|
|
return { |
|
|
return { |
|
|
// 是否显示边框 |
|
|
// 是否显示边框 |
|
|
border: true, |
|
|
border: true, |
|
|
// 是否显示分隔线 |
|
|
// 是否显示分隔线 |
|
|
dividline: true, |
|
|
dividline: true, |
|
|
// 线条样式 |
|
|
// 线条样式 |
|
|
borderStyle: {} |
|
|
borderStyle: {}, |
|
|
} |
|
|
}; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
imageStyles: { |
|
|
imageStyles: { |
|
|
type: Object, |
|
|
type: Object, |
|
|
default () { |
|
|
default() { |
|
|
return { |
|
|
return { |
|
|
width: 'auto', |
|
|
width: "auto", |
|
|
height: 'auto' |
|
|
height: "auto", |
|
|
} |
|
|
}; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
readonly: { |
|
|
readonly: { |
|
|
type: Boolean, |
|
|
type: Boolean, |
|
|
default: false |
|
|
default: false, |
|
|
}, |
|
|
}, |
|
|
returnType: { |
|
|
returnType: { |
|
|
type: String, |
|
|
type: String, |
|
|
default: 'array' |
|
|
default: "array", |
|
|
}, |
|
|
}, |
|
|
sizeType: { |
|
|
sizeType: { |
|
|
type: Array, |
|
|
type: Array, |
|
|
default () { |
|
|
default() { |
|
|
return ['original', 'compressed'] |
|
|
return ["original", "compressed"]; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
sourceType: { |
|
|
sourceType: { |
|
|
type: Array, |
|
|
type: Array, |
|
|
default () { |
|
|
default() { |
|
|
return ['album', 'camera'] |
|
|
return ["album", "camera"]; |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
files: [], |
|
|
files: [], |
|
|
localValue: [] |
|
|
localValue: [], |
|
|
} |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
watch: { |
|
|
watch: { |
|
|
// #ifndef VUE3 |
|
|
// #ifndef VUE3 |
|
|
value: { |
|
|
value: { |
|
|
handler(newVal, oldVal) { |
|
|
handler(newVal, oldVal) { |
|
|
this.setValue(newVal, oldVal) |
|
|
this.setValue(newVal, oldVal); |
|
|
}, |
|
|
}, |
|
|
immediate: true |
|
|
immediate: true, |
|
|
}, |
|
|
}, |
|
|
// #endif |
|
|
// #endif |
|
|
// #ifdef VUE3 |
|
|
// #ifdef VUE3 |
|
|
modelValue: { |
|
|
modelValue: { |
|
|
handler(newVal, oldVal) { |
|
|
handler(newVal, oldVal) { |
|
|
this.setValue(newVal, oldVal) |
|
|
this.setValue(newVal, oldVal); |
|
|
}, |
|
|
}, |
|
|
immediate: true |
|
|
immediate: true, |
|
|
}, |
|
|
}, |
|
|
// #endif |
|
|
// #endif |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
filesList() { |
|
|
filesList() { |
|
|
let files = [] |
|
|
let files = []; |
|
|
this.files.forEach(v => { |
|
|
this.files.forEach((v) => { |
|
|
files.push(v) |
|
|
files.push(v); |
|
|
}) |
|
|
}); |
|
|
return files |
|
|
return files; |
|
|
}, |
|
|
}, |
|
|
showType() { |
|
|
showType() { |
|
|
if (this.fileMediatype === 'image') { |
|
|
if (this.fileMediatype === "image") { |
|
|
return this.mode |
|
|
return this.mode; |
|
|
} |
|
|
} |
|
|
return 'list' |
|
|
return "list"; |
|
|
}, |
|
|
}, |
|
|
limitLength() { |
|
|
limitLength() { |
|
|
if (this.returnType === 'object') { |
|
|
if (this.returnType === "object") { |
|
|
return 1 |
|
|
return 1; |
|
|
} |
|
|
} |
|
|
if (!this.limit) { |
|
|
if (!this.limit) { |
|
|
return 1 |
|
|
return 1; |
|
|
} |
|
|
} |
|
|
if (this.limit >= 9) { |
|
|
if (this.limit >= 9) { |
|
|
return 9 |
|
|
return 9; |
|
|
} |
|
|
|
|
|
return this.limit |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
return this.limit; |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
// TODO 兼容不开通服务空间的情况 |
|
|
// TODO 兼容不开通服务空间的情况 |
|
|
if (!(uniCloud.config && uniCloud.config.provider)) { |
|
|
if (!(uniCloud.config && uniCloud.config.provider)) { |
|
|
this.noSpace = true |
|
|
this.noSpace = true; |
|
|
uniCloud.chooseAndUploadFile = chooseAndUploadFile |
|
|
uniCloud.chooseAndUploadFile = chooseAndUploadFile; |
|
|
} |
|
|
} |
|
|
this.form = this.getForm('uniForms') |
|
|
this.form = this.getForm("uniForms"); |
|
|
this.formItem = this.getForm('uniFormsItem') |
|
|
this.formItem = this.getForm("uniFormsItem"); |
|
|
if (this.form && this.formItem) { |
|
|
if (this.form && this.formItem) { |
|
|
if (this.formItem.name) { |
|
|
if (this.formItem.name) { |
|
|
this.rename = this.formItem.name |
|
|
this.rename = this.formItem.name; |
|
|
this.form.inputChildrens.push(this) |
|
|
this.form.inputChildrens.push(this); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
@ -266,89 +291,91 @@ |
|
|
*/ |
|
|
*/ |
|
|
clearFiles(index) { |
|
|
clearFiles(index) { |
|
|
if (index !== 0 && !index) { |
|
|
if (index !== 0 && !index) { |
|
|
this.files = [] |
|
|
this.files = []; |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
this.setEmit() |
|
|
this.setEmit(); |
|
|
}) |
|
|
}); |
|
|
} else { |
|
|
} else { |
|
|
this.files.splice(index, 1) |
|
|
this.files.splice(index, 1); |
|
|
} |
|
|
} |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
this.setEmit() |
|
|
this.setEmit(); |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
/** |
|
|
/** |
|
|
* 公开用户使用，继续上传 |
|
|
* 公开用户使用，继续上传 |
|
|
*/ |
|
|
*/ |
|
|
upload() { |
|
|
upload() { |
|
|
let files = [] |
|
|
let files = []; |
|
|
this.files.forEach((v, index) => { |
|
|
this.files.forEach((v, index) => { |
|
|
if (v.status === 'ready' || v.status === 'error') { |
|
|
if (v.status === "ready" || v.status === "error") { |
|
|
files.push(Object.assign({}, v)) |
|
|
files.push(Object.assign({}, v)); |
|
|
} |
|
|
} |
|
|
}) |
|
|
}); |
|
|
return this.uploadFiles(files) |
|
|
return this.uploadFiles(files); |
|
|
}, |
|
|
}, |
|
|
async setValue(newVal, oldVal) { |
|
|
async setValue(newVal, oldVal) { |
|
|
const newData = async (v) => { |
|
|
const newData = async (v) => { |
|
|
const reg = /cloud:\/\/([\w.]+\/?)\S*/ |
|
|
const reg = /cloud:\/\/([\w.]+\/?)\S*/; |
|
|
let url = '' |
|
|
let url = ""; |
|
|
if(v.fileID){ |
|
|
if (v.fileID) { |
|
|
url = v.fileID |
|
|
url = v.fileID; |
|
|
}else{ |
|
|
} else { |
|
|
url = v.url |
|
|
url = v.url; |
|
|
} |
|
|
} |
|
|
if (reg.test(url)) { |
|
|
if (reg.test(url)) { |
|
|
v.fileID = url |
|
|
v.fileID = url; |
|
|
v.url = await this.getTempFileURL(url) |
|
|
v.url = await this.getTempFileURL(url); |
|
|
} |
|
|
|
|
|
if(v.url) v.path = v.url |
|
|
|
|
|
return v |
|
|
|
|
|
} |
|
|
} |
|
|
if (this.returnType === 'object') { |
|
|
if (v.url) v.path = v.url; |
|
|
|
|
|
return v; |
|
|
|
|
|
}; |
|
|
|
|
|
if (this.returnType === "object") { |
|
|
if (newVal) { |
|
|
if (newVal) { |
|
|
await newData(newVal) |
|
|
await newData(newVal); |
|
|
} else { |
|
|
} else { |
|
|
newVal = {} |
|
|
newVal = {}; |
|
|
} |
|
|
} |
|
|
} else { |
|
|
} else { |
|
|
if (!newVal) newVal = [] |
|
|
if (!newVal) newVal = []; |
|
|
for(let i =0 ;i < newVal.length ;i++){ |
|
|
for (let i = 0; i < newVal.length; i++) { |
|
|
let v = newVal[i] |
|
|
let v = newVal[i]; |
|
|
await newData(v) |
|
|
await newData(v); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
this.localValue = newVal |
|
|
this.localValue = newVal; |
|
|
if (this.form && this.formItem &&!this.is_reset) { |
|
|
if (this.form && this.formItem && !this.is_reset) { |
|
|
this.is_reset = false |
|
|
this.is_reset = false; |
|
|
this.formItem.setValue(this.localValue) |
|
|
this.formItem.setValue(this.localValue); |
|
|
} |
|
|
} |
|
|
let filesData = Object.keys(newVal).length > 0 ? newVal : []; |
|
|
let filesData = Object.keys(newVal).length > 0 ? newVal : []; |
|
|
this.files = [].concat(filesData) |
|
|
this.files = [].concat(filesData); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* 选择文件 |
|
|
* 选择文件 |
|
|
*/ |
|
|
*/ |
|
|
choose() { |
|
|
choose() { |
|
|
|
|
|
if (this.disabled) return; |
|
|
if (this.disabled) return |
|
|
if ( |
|
|
if (this.files.length >= Number(this.limitLength) && this.showType !== 'grid' && this.returnType === |
|
|
this.files.length >= Number(this.limitLength) && |
|
|
'array') { |
|
|
this.showType !== "grid" && |
|
|
|
|
|
this.returnType === "array" |
|
|
|
|
|
) { |
|
|
uni.showToast({ |
|
|
uni.showToast({ |
|
|
title: `您最多选择 ${this.limitLength} 个文件`, |
|
|
title: `您最多选择 ${this.limitLength} 个文件`, |
|
|
icon: 'none' |
|
|
icon: "none", |
|
|
}) |
|
|
}); |
|
|
return |
|
|
return; |
|
|
} |
|
|
} |
|
|
this.chooseFiles() |
|
|
this.chooseFiles(); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* 选择文件并上传 |
|
|
* 选择文件并上传 |
|
|
*/ |
|
|
*/ |
|
|
chooseFiles() { |
|
|
chooseFiles() { |
|
|
const _extname = get_extname(this.fileExtname) |
|
|
const _extname = get_extname(this.fileExtname); |
|
|
// 获取后缀 |
|
|
// 获取后缀 |
|
|
uniCloud |
|
|
uniCloud |
|
|
.chooseAndUploadFile({ |
|
|
.chooseAndUploadFile({ |
|
|
@ -360,16 +387,16 @@ |
|
|
extension: _extname.length > 0 ? _extname : undefined, |
|
|
extension: _extname.length > 0 ? _extname : undefined, |
|
|
count: this.limitLength - this.files.length, //默认9 |
|
|
count: this.limitLength - this.files.length, //默认9 |
|
|
onChooseFile: this.chooseFileCallback, |
|
|
onChooseFile: this.chooseFileCallback, |
|
|
onUploadProgress: progressEvent => { |
|
|
onUploadProgress: (progressEvent) => { |
|
|
this.setProgress(progressEvent, progressEvent.index) |
|
|
this.setProgress(progressEvent, progressEvent.index); |
|
|
} |
|
|
}, |
|
|
}) |
|
|
|
|
|
.then(result => { |
|
|
|
|
|
this.setSuccessAndError(result.tempFiles) |
|
|
|
|
|
}) |
|
|
}) |
|
|
.catch(err => { |
|
|
.then((result) => { |
|
|
console.log('选择失败', err) |
|
|
this.setSuccessAndError(result.tempFiles); |
|
|
}) |
|
|
}) |
|
|
|
|
|
.catch((err) => { |
|
|
|
|
|
console.log("选择失败", err); |
|
|
|
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
@ -377,46 +404,44 @@ |
|
|
* @param {Object} res |
|
|
* @param {Object} res |
|
|
*/ |
|
|
*/ |
|
|
async chooseFileCallback(res) { |
|
|
async chooseFileCallback(res) { |
|
|
const _extname = get_extname(this.fileExtname) |
|
|
const _extname = get_extname(this.fileExtname); |
|
|
const is_one = (Number(this.limitLength) === 1 && |
|
|
const is_one = |
|
|
|
|
|
(Number(this.limitLength) === 1 && |
|
|
this.disablePreview && |
|
|
this.disablePreview && |
|
|
!this.disabled) || |
|
|
!this.disabled) || |
|
|
this.returnType === 'object' |
|
|
this.returnType === "object"; |
|
|
// 如果这有一个文件 ，需要清空本地缓存数据 |
|
|
// 如果这有一个文件 ，需要清空本地缓存数据 |
|
|
if (is_one) { |
|
|
if (is_one) { |
|
|
this.files = [] |
|
|
this.files = []; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
let { |
|
|
let { filePaths, files } = get_files_and_is_max(res, _extname); |
|
|
filePaths, |
|
|
|
|
|
files |
|
|
|
|
|
} = get_files_and_is_max(res, _extname) |
|
|
|
|
|
if (!(_extname && _extname.length > 0)) { |
|
|
if (!(_extname && _extname.length > 0)) { |
|
|
filePaths = res.tempFilePaths |
|
|
filePaths = res.tempFilePaths; |
|
|
files = res.tempFiles |
|
|
files = res.tempFiles; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
let currentData = [] |
|
|
let currentData = []; |
|
|
for (let i = 0; i < files.length; i++) { |
|
|
for (let i = 0; i < files.length; i++) { |
|
|
if (this.limitLength - this.files.length <= 0) break |
|
|
if (this.limitLength - this.files.length <= 0) break; |
|
|
files[i].uuid = Date.now() |
|
|
files[i].uuid = Date.now(); |
|
|
let filedata = await get_file_data(files[i], this.fileMediatype) |
|
|
let filedata = await get_file_data(files[i], this.fileMediatype); |
|
|
filedata.progress = 0 |
|
|
filedata.progress = 0; |
|
|
filedata.status = 'ready' |
|
|
filedata.status = "ready"; |
|
|
this.files.push(filedata) |
|
|
this.files.push(filedata); |
|
|
currentData.push({ |
|
|
currentData.push({ |
|
|
...filedata, |
|
|
...filedata, |
|
|
file: files[i] |
|
|
file: files[i], |
|
|
}) |
|
|
}); |
|
|
} |
|
|
} |
|
|
this.$emit('select', { |
|
|
this.$emit("select", { |
|
|
tempFiles: currentData, |
|
|
tempFiles: currentData, |
|
|
tempFilePaths: filePaths |
|
|
tempFilePaths: filePaths, |
|
|
}) |
|
|
}); |
|
|
res.tempFiles = files |
|
|
res.tempFiles = files; |
|
|
// 停止自动上传 |
|
|
// 停止自动上传 |
|
|
if (!this.autoUpload || this.noSpace) { |
|
|
if (!this.autoUpload || this.noSpace) { |
|
|
res.tempFiles = [] |
|
|
res.tempFiles = []; |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
@ -425,70 +450,73 @@ |
|
|
* @param {Object} e |
|
|
* @param {Object} e |
|
|
*/ |
|
|
*/ |
|
|
uploadFiles(files) { |
|
|
uploadFiles(files) { |
|
|
files = [].concat(files) |
|
|
files = [].concat(files); |
|
|
return uploadCloudFiles.call(this, files, 5, res => { |
|
|
return uploadCloudFiles |
|
|
this.setProgress(res, res.index, true) |
|
|
.call(this, files, 5, (res) => { |
|
|
|
|
|
this.setProgress(res, res.index, true); |
|
|
}) |
|
|
}) |
|
|
.then(result => { |
|
|
.then((result) => { |
|
|
this.setSuccessAndError(result) |
|
|
this.setSuccessAndError(result); |
|
|
return result; |
|
|
return result; |
|
|
}) |
|
|
}) |
|
|
.catch(err => { |
|
|
.catch((err) => { |
|
|
console.log(err) |
|
|
console.log(err); |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* 成功或失败 |
|
|
* 成功或失败 |
|
|
*/ |
|
|
*/ |
|
|
async setSuccessAndError(res, fn) { |
|
|
async setSuccessAndError(res, fn) { |
|
|
let successData = [] |
|
|
let successData = []; |
|
|
let errorData = [] |
|
|
let errorData = []; |
|
|
let tempFilePath = [] |
|
|
let tempFilePath = []; |
|
|
let errorTempFilePath = [] |
|
|
let errorTempFilePath = []; |
|
|
for (let i = 0; i < res.length; i++) { |
|
|
for (let i = 0; i < res.length; i++) { |
|
|
const item = res[i] |
|
|
const item = res[i]; |
|
|
const index = item.uuid ? this.files.findIndex(p => p.uuid === item.uuid) : item.index |
|
|
const index = item.uuid |
|
|
|
|
|
? this.files.findIndex((p) => p.uuid === item.uuid) |
|
|
|
|
|
: item.index; |
|
|
|
|
|
|
|
|
if (index === -1 || !this.files) break |
|
|
if (index === -1 || !this.files) break; |
|
|
if (item.errMsg === 'request:fail') { |
|
|
if (item.errMsg === "request:fail") { |
|
|
this.files[index].url = item.path |
|
|
this.files[index].url = item.path; |
|
|
this.files[index].status = 'error' |
|
|
this.files[index].status = "error"; |
|
|
this.files[index].errMsg = item.errMsg |
|
|
this.files[index].errMsg = item.errMsg; |
|
|
// this.files[index].progress = -1 |
|
|
// this.files[index].progress = -1 |
|
|
errorData.push(this.files[index]) |
|
|
errorData.push(this.files[index]); |
|
|
errorTempFilePath.push(this.files[index].url) |
|
|
errorTempFilePath.push(this.files[index].url); |
|
|
} else { |
|
|
} else { |
|
|
this.files[index].errMsg = '' |
|
|
this.files[index].errMsg = ""; |
|
|
this.files[index].fileID = item.url |
|
|
this.files[index].fileID = item.url; |
|
|
const reg = /cloud:\/\/([\w.]+\/?)\S*/ |
|
|
const reg = /cloud:\/\/([\w.]+\/?)\S*/; |
|
|
if (reg.test(item.url)) { |
|
|
if (reg.test(item.url)) { |
|
|
this.files[index].url = await this.getTempFileURL(item.url) |
|
|
this.files[index].url = await this.getTempFileURL(item.url); |
|
|
}else{ |
|
|
} else { |
|
|
this.files[index].url = item.url |
|
|
this.files[index].url = item.url; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
this.files[index].status = 'success' |
|
|
this.files[index].status = "success"; |
|
|
this.files[index].progress += 1 |
|
|
this.files[index].progress += 1; |
|
|
successData.push(this.files[index]) |
|
|
successData.push(this.files[index]); |
|
|
tempFilePath.push(this.files[index].fileID) |
|
|
tempFilePath.push(this.files[index].fileID); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (successData.length > 0) { |
|
|
if (successData.length > 0) { |
|
|
this.setEmit() |
|
|
this.setEmit(); |
|
|
// 状态改变返回 |
|
|
// 状态改变返回 |
|
|
this.$emit('success', { |
|
|
this.$emit("success", { |
|
|
tempFiles: this.backObject(successData), |
|
|
tempFiles: this.backObject(successData), |
|
|
tempFilePaths: tempFilePath |
|
|
tempFilePaths: tempFilePath, |
|
|
}) |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (errorData.length > 0) { |
|
|
if (errorData.length > 0) { |
|
|
this.$emit('fail', { |
|
|
this.$emit("fail", { |
|
|
tempFiles: this.backObject(errorData), |
|
|
tempFiles: this.backObject(errorData), |
|
|
tempFilePaths: errorTempFilePath |
|
|
tempFilePaths: errorTempFilePath, |
|
|
}) |
|
|
}); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
@ -499,22 +527,26 @@ |
|
|
* @param {Object} type |
|
|
* @param {Object} type |
|
|
*/ |
|
|
*/ |
|
|
setProgress(progressEvent, index, type) { |
|
|
setProgress(progressEvent, index, type) { |
|
|
const fileLenth = this.files.length |
|
|
const fileLenth = this.files.length; |
|
|
const percentNum = (index / fileLenth) * 100 |
|
|
const percentNum = (index / fileLenth) * 100; |
|
|
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total) |
|
|
const percentCompleted = Math.round( |
|
|
let idx = index |
|
|
(progressEvent.loaded * 100) / progressEvent.total |
|
|
|
|
|
); |
|
|
|
|
|
let idx = index; |
|
|
if (!type) { |
|
|
if (!type) { |
|
|
idx = this.files.findIndex(p => p.uuid === progressEvent.tempFile.uuid) |
|
|
idx = this.files.findIndex( |
|
|
|
|
|
(p) => p.uuid === progressEvent.tempFile.uuid |
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
if (idx === -1 || !this.files[idx]) return |
|
|
if (idx === -1 || !this.files[idx]) return; |
|
|
// fix by mehaotian 100 就会消失，-1 是为了让进度条消失 |
|
|
// fix by mehaotian 100 就会消失，-1 是为了让进度条消失 |
|
|
this.files[idx].progress = percentCompleted - 1 |
|
|
this.files[idx].progress = percentCompleted - 1; |
|
|
// 上传中 |
|
|
// 上传中 |
|
|
this.$emit('progress', { |
|
|
this.$emit("progress", { |
|
|
index: idx, |
|
|
index: idx, |
|
|
progress: parseInt(percentCompleted), |
|
|
progress: parseInt(percentCompleted), |
|
|
tempFile: this.files[idx] |
|
|
tempFile: this.files[idx], |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
@ -522,14 +554,15 @@ |
|
|
* @param {Object} index |
|
|
* @param {Object} index |
|
|
*/ |
|
|
*/ |
|
|
delFile(index) { |
|
|
delFile(index) { |
|
|
this.$emit('delete', { |
|
|
this.$emit("delete", { |
|
|
tempFile: this.files[index], |
|
|
tempFile: this.files[index], |
|
|
tempFilePath: this.files[index].url |
|
|
tempFilePath: this.files[index].url, |
|
|
}) |
|
|
index, |
|
|
this.files.splice(index, 1) |
|
|
}); |
|
|
|
|
|
this.files.splice(index, 1); |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
this.setEmit() |
|
|
this.setEmit(); |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
@ -537,34 +570,34 @@ |
|
|
* @param {Object} name |
|
|
* @param {Object} name |
|
|
*/ |
|
|
*/ |
|
|
getFileExt(name) { |
|
|
getFileExt(name) { |
|
|
const last_len = name.lastIndexOf('.') |
|
|
const last_len = name.lastIndexOf("."); |
|
|
const len = name.length |
|
|
const len = name.length; |
|
|
return { |
|
|
return { |
|
|
name: name.substring(0, last_len), |
|
|
name: name.substring(0, last_len), |
|
|
ext: name.substring(last_len + 1, len) |
|
|
ext: name.substring(last_len + 1, len), |
|
|
} |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* 处理返回事件 |
|
|
* 处理返回事件 |
|
|
*/ |
|
|
*/ |
|
|
setEmit() { |
|
|
setEmit() { |
|
|
let data = [] |
|
|
let data = []; |
|
|
if (this.returnType === 'object') { |
|
|
if (this.returnType === "object") { |
|
|
data = this.backObject(this.files)[0] |
|
|
data = this.backObject(this.files)[0]; |
|
|
this.localValue = data?data:null |
|
|
this.localValue = data ? data : null; |
|
|
} else { |
|
|
} else { |
|
|
data = this.backObject(this.files) |
|
|
data = this.backObject(this.files); |
|
|
if (!this.localValue) { |
|
|
if (!this.localValue) { |
|
|
this.localValue = [] |
|
|
this.localValue = []; |
|
|
} |
|
|
} |
|
|
this.localValue = [...data] |
|
|
this.localValue = [...data]; |
|
|
} |
|
|
} |
|
|
// #ifdef VUE3 |
|
|
// #ifdef VUE3 |
|
|
this.$emit('update:modelValue', this.localValue) |
|
|
this.$emit("update:modelValue", this.localValue); |
|
|
// #endif |
|
|
// #endif |
|
|
// #ifndef VUE3 |
|
|
// #ifndef VUE3 |
|
|
this.$emit('input', this.localValue) |
|
|
this.$emit("input", this.localValue); |
|
|
// #endif |
|
|
// #endif |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
@ -573,8 +606,8 @@ |
|
|
* @param {Object} files |
|
|
* @param {Object} files |
|
|
*/ |
|
|
*/ |
|
|
backObject(files) { |
|
|
backObject(files) { |
|
|
let newFilesData = [] |
|
|
let newFilesData = []; |
|
|
files.forEach(v => { |
|
|
files.forEach((v) => { |
|
|
newFilesData.push({ |
|
|
newFilesData.push({ |
|
|
extname: v.extname, |
|
|
extname: v.extname, |
|
|
fileType: v.fileType, |
|
|
fileType: v.fileType, |
|
|
@ -582,23 +615,23 @@ |
|
|
name: v.name, |
|
|
name: v.name, |
|
|
path: v.path, |
|
|
path: v.path, |
|
|
size: v.size, |
|
|
size: v.size, |
|
|
fileID:v.fileID, |
|
|
fileID: v.fileID, |
|
|
url: v.url |
|
|
url: v.url, |
|
|
}) |
|
|
}); |
|
|
}) |
|
|
}); |
|
|
return newFilesData |
|
|
return newFilesData; |
|
|
}, |
|
|
}, |
|
|
async getTempFileURL(fileList) { |
|
|
async getTempFileURL(fileList) { |
|
|
fileList = { |
|
|
fileList = { |
|
|
fileList: [].concat(fileList) |
|
|
fileList: [].concat(fileList), |
|
|
} |
|
|
}; |
|
|
const urls = await uniCloud.getTempFileURL(fileList) |
|
|
const urls = await uniCloud.getTempFileURL(fileList); |
|
|
return urls.fileList[0].tempFileURL || '' |
|
|
return urls.fileList[0].tempFileURL || ""; |
|
|
}, |
|
|
}, |
|
|
/** |
|
|
/** |
|
|
* 获取父元素实例 |
|
|
* 获取父元素实例 |
|
|
*/ |
|
|
*/ |
|
|
getForm(name = 'uniForms') { |
|
|
getForm(name = "uniForms") { |
|
|
let parent = this.$parent; |
|
|
let parent = this.$parent; |
|
|
let parentName = parent.$options.name; |
|
|
let parentName = parent.$options.name; |
|
|
while (parentName !== name) { |
|
|
while (parentName !== name) { |
|
|
@ -607,57 +640,57 @@ |
|
|
parentName = parent.$options.name; |
|
|
parentName = parent.$options.name; |
|
|
} |
|
|
} |
|
|
return parent; |
|
|
return parent; |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
} |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style> |
|
|
<style> |
|
|
.uni-file-picker { |
|
|
.uni-file-picker { |
|
|
/* #ifndef APP-NVUE */ |
|
|
/* #ifndef APP-NVUE */ |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
/* #endif */ |
|
|
/* #endif */ |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.uni-file-picker__header { |
|
|
.uni-file-picker__header { |
|
|
padding-top: 5px; |
|
|
padding-top: 5px; |
|
|
padding-bottom: 10px; |
|
|
padding-bottom: 10px; |
|
|
/* #ifndef APP-NVUE */ |
|
|
/* #ifndef APP-NVUE */ |
|
|
display: flex; |
|
|
display: flex; |
|
|
/* #endif */ |
|
|
/* #endif */ |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.file-title { |
|
|
.file-title { |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
color: #333; |
|
|
color: #333; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.file-count { |
|
|
.file-count { |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
color: #999; |
|
|
color: #999; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.is-add { |
|
|
.is-add { |
|
|
/* #ifndef APP-NVUE */ |
|
|
/* #ifndef APP-NVUE */ |
|
|
display: flex; |
|
|
display: flex; |
|
|
/* #endif */ |
|
|
/* #endif */ |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.icon-add { |
|
|
.icon-add { |
|
|
width: 50px; |
|
|
width: 50px; |
|
|
height: 5px; |
|
|
height: 5px; |
|
|
background-color: #f1f1f1; |
|
|
background-color: #f1f1f1; |
|
|
border-radius: 2px; |
|
|
border-radius: 2px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.rotate { |
|
|
.rotate { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
transform: rotate(90deg); |
|
|
transform: rotate(90deg); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
zhangminghao
4 weeks ago