<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 业务表的上传类型（全网唯一，推荐格式：实体名_上传类型，例如，意见反馈图片：appComment_image）
|
* @property {String} uploadType 上传文件类型：image，目前移动端仅支持上传图片
|
* @property {String} imageMaxWidth 图片压缩，最大宽度（uploadType为image生效），设置-1代表不做任何处理
|
* @property {String} imageMaxHeight 图片压缩，最大宽度（uploadType为image生效），设置-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、fileUploadDelIds
|
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、fileUploadDelIds
|
uploadRemove(index, lists){
|
this.uploadRefreshIds(lists);
|
},
|
// 刷新 fileUploadIds、fileUploadDelIds
|
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>
|
