效果图：
/utils/request.js
// 上传文件export function uploadFile({url, data, timeout, callback}) {timeout ? service.defaults.timeout = timeout : ''return service.post(url, data, {headers: {'Content-Type': 'multipart/form-data' },onUploadProgress: progressEvent => {callback && callback(progressEvent)}}).then(res => {return res}).catch((r) => {console.error(r)})}export default service
/api/print/server.js
import {uploadFile } from '@/utils/request'// 上传打印服务更新包export function uploadPackage(data,callback) {return uploadFile({url: '/printServer/package/file/upload',data: data,timeout: 30000,callback})}
/views/print/server/index.vue
// 替换更新包replacePackage(item){this.processNum = 0console.log('上传的文件：', item)const fd = new FormData()fd.append('file', item.file)// 开启lodingthis.upload_loading = truethis.pageLoading = trueuploadPackage(fd, (progressEvent) => {// console.log('上传进度:', progressEvent,parseFloat((progressEvent.loaded / progressEvent.total) * 100).toFixed(1))this.processNum = parseFloat((progressEvent.loaded / progressEvent.total) * 100).toFixed(1)if(this.processNum>=100){this.pageLoading = false}}).then(res => {console.log('文件上传结果:', res)this.pageLoading = falseif(res.code===200){this.$modal.msgSuccess('更新包上传成功，稍候更新版本号')this.isShowPackageDialog = false// this.watchServerPackage()} else {this.$modal.msgError(res.msg)}this.upload_loading = falsethis.$refs.uploader.clearFiles()}).catch(err => {console.log('文件上失败:', err)this.upload_loading = falsethis.pageLoading = falsethis.$refs.uploader.clearFiles()});},
