请求的Api：
// 合同管理 - 详情 - 附件上传
export function saveAttachmentListApi(data){
return request({
url: `/api/supplychain/StandardOnline/saveAttachmentList`,
method: 'POST',
data
})
}
// 附件上传
export function chunkMergesOnly(data){
return request({
url: `/api/file/mergeAttachmentOnly`,
method: 'POST',
data
})
}<template>
<view>
<u-toast ref="uToast"></u-toast>
<u-popup v-model="viewVisible" @close="close" mode="center" border-radius="14">
<view class="usingSealsClass">
<view class="topTitle">
<text>合同文件上传</text>
</view>
<view class="bottomArea">
<ss-upload ref="ssUpload" width="260rpx" height="100rpx" @uploadFilepProgress='uploadFilepProgress'
@uploadSuccess="onuploadSuccess" :uploadOptions="uploadOptions" :isUploadServer="isUploadServer"
@getFile='getFile'>
<button class="selectFileClass" @click="uploadFile">上传附件</button>
</ss-upload>
<!-- 上传进度条 -->
<view class="material-sent" v-if="flieProgress !== 0">
<progress class="select-tips" :percent="flieProgress" stroke-width="4" activeColor=" #19be6b" />
<view class="tips-text">
上传进度{{flieProgress}}%
</view>
</view>
<view class="uploadTip">
<text>注：只能上传"ZIP"类型的文件,压缩包的名称必须为合同号</text>
</view>
</view>
<view class="buttonClass">
<button size="default" type="default"
style="width: 100px;height:30px;margin:0px;margin-right:10px;fontSize:14px;lineHeight:30px;color:#ffffff;backgroundColor: #ff5555;border:1px solid #ff5555"
@click="cancelClick">取消</button>
<button size="default" type="default"
style="width: 100px;height:30px;margin:0px;margin-right:16px;fontSize:14px;lineHeight:30px;color:#ffffff;backgroundColor:#1890ff;border:1px solid #1890ff"
@click="confirmClick">提交</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import {
saveAttachmentListApi,
chunkMergesOnly
} from '@/api/apply/standardPlatformApi'
import SparkMD5 from 'spark-md5';
export default {
props: ['config'],
mounted() {
this.viewVisible = true;
this.serverParams.businessIds = [this.config.id];
this.serverParams.contractNumbers = [this.config.row[0]['CONTRACT_NUMBER']];
},
data() {
return {
flieProgress: 0,
isUploadServer: true,
serverParams: {}, // 业务接口需要的参数
viewVisible: false,
uploadOptions: {
url: this.define.baseURL + '/api/file/chunk',
name: 'file',
header: {
'Authorization': uni.getStorageSync("token")
},
formData: {
chunkNumber: 1,
chunkSize: 0,
currentChunkSize: 0,
totalSize: 0,
identifier: '',
filename: '',
relativePath: '',
totalChunks: 1,
fileType: 'application/x-zip-compressed',
extension: 'zip',
}
}
}
},
methods: {
confirmClick() {
saveAttachmentListApi(this.serverParams).then(res => {
if (res.code == 200) {
this.$refs.uToast.show({
type: 'success',
title: '附件上传成功！'
})
setTimeout(() => {
this.viewVisible = false;
this.$emit('closeCustomDialog', false)
}, 1000)
} else {
this.$refs.uToast.show({
type: 'error',
icon: false,
title: '附件上传失败！',
})
}
}).catch(err => {
})
},
// 上传成功
onuploadSuccess(e, data) {
console.log(data,'DADA')
let extension = this.getFileExtension(data[0].name).extension
let fileName = this.getFileExtension(data[0].name).currentFileName
if (extension !== 'zip') {
this.flieProgress = 0
this.$refs.uToast.show({
type: 'warning',
title: '请上传"ZIP"类型的文件',
icon: false,
duration: 3000
})
return
}
if(fileName !== this.serverParams.contractNumbers) {
this.flieProgress = 0
this.$refs.uToast.show({
type: 'warning',
title: `当前上传文件名称:【${fileName}】\n当前合同号:【${this.serverParams.contractNumbers}】\n上传的文件名称须为当前合同号，请重新上传！`,
icon: false,
duration: 5000
})
return
}
const form = new FormData()
form.append('identifier', this.uploadOptions.formData.identifier)
form.append('fileName', this.uploadOptions.formData.filename)
form.append('fileSize', this.uploadOptions.formData.totalSize)
form.append('fileType', 'x-zip-compressed')
form.append('extension', 'zip')
form.append('type', 'annex')
form.append('pathType', 'defaultPath')
form.append('isAccount', '0')
form.append('folder', '')
form.append('moduleId', '')
form.append('tableName', '')
form.append('onlineSignature', '1')
form.append('businessType', '')
form.append('businessIds', this.serverParams.businessIds)
form.append('contractNumbers', this.serverParams.contractNumbers)
let formDataStr = '';
form.forEach((value, key) => {
if (formDataStr !== '') {
formDataStr += '&';
}
formDataStr += encodeURIComponent(key) + '=' + encodeURIComponent(value);
});
uni.request({
url: this.define.baseURL + '/api/file/mergeAttachmentOnly',
method: 'POST',
data: formDataStr,
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: (res) => {
setTimeout(() => {
this.flieProgress = 0
this.$refs.uToast.show({
type: 'success',
title: `"${this.uploadOptions.formData.filename}"压缩包成功上传，请点击提交按钮！`,
icon: false,
duration:3000
})
},500)
this.serverParams = res.data
},
fail: (err) => {
console.error('请求失败', err);
}
});
},
close() {
this.viewVisible = false;
this.$emit('closeCustomDialog', true)
},
cancelClick() {
this.viewVisible = false;
this.$emit('closeCustomDialog', true)
},
uploadFile() {
setTimeout(() => {
this.$refs.ssUpload.uploadFile()
})
},
computeMD5(file) {
const spark = new SparkMD5.ArrayBuffer()
const md5 = spark.end()
this.computeMD5Success(md5)
},
computeMD5Success(md5, file) {
this.uploadOptions.formData.identifier = md5 // 把md5值作为文件的识别码
},
getFile(e) {
this.computeMD5()
this.uploadOptions.formData.chunkSize = e.tempFiles[0].size
this.uploadOptions.formData.currentChunkSize = e.tempFiles[0].size
this.uploadOptions.formData.totalSize = e.tempFiles[0].size
this.uploadOptions.formData.filename = e.tempFiles[0].name
this.uploadOptions.formData.relativePath = e.tempFiles[0].name
},
getFileExtension(fileName) {
// 使用 split 方法将文件名按 '.' 分割成数组
const parts = fileName.split('.');
// 数组的最后一个元素就是文件的后缀
const extension = parts[parts.length - 1];
const currentFileName = parts[0]
return {extension,currentFileName}
},
// 上传文件的回调事件 - 值为：上传进度
uploadFilepProgress(value) {
this.flieProgress = value
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .zb-table {
height: 95% !important;
}
.usingSealsClass {
width: 700rpx;
height: 400rpx;
position: relative;
.topTitle {
width: 100%;
height: 80rpx;
text-align: center;
border-bottom: 1px dashed lightgrey;
line-height: 75rpx;
}
.bottomArea {
margin-top: 5px;
width: 100%;
height: calc(100% - 90px);
position: relative;
.uploadTip {
position: absolute;
top: 70px;
left: 18px;
color: red;
font-size: 12px;
}
.material-sent {
width: 189rpx;
background: rgba(245, 245, 245, 0.5);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
top: 72%;
.select-tips {
width: 130rpx;
height: 10rpx;
margin-bottom: 12rpx;
}
.tips-text {
font-size: 24rpx;
color: #028DE3;
}
}
}
.buttonClass {
position: absolute;
bottom: 10px;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
}
</style>
