Skip to content

C
CFFP-HB
Commit 55f4775c by kyle
Options

上传pdf

parents 2c78fdc9 a45585d8
Showing with 256 additions and 20 deletions
components/uploadFile/uploadFile.vue 0 → 100644
<template>
<view class="" :style="{opacity: opacity}">
<lsj-upload ref="lsjUpload" childId="upload1" :width="width" :height="height" :option="option" :size="size"
:formats="formats" :debug="debug" :instantly="instantly" @progress="onProgress" @change="onChange" @uploadEnd="onuploadEnd" :opacity="opacity">
<!-- <view class="btn" :style="{width: width,height: height}">选择附件</view> -->
</lsj-upload>
<!-- <view class="padding"> -->
<!-- <view>已选择文件列表：</view> -->
<!-- #ifndef MP-WEIXIN -->
<!-- <view v-for="(item,index) in files.values()" :key="index">
<image style="width: 100rpx;height: 100rpx;" :src="item.path" mode="widthFix"></image>
<text>{{item.path}}</text>
<text>{{item.name}}</text>
<text style="margin-left: 10rpx;">大小：{{item.size}}</text>
<text style="margin-left: 10rpx;">状态：{{item.type}}</text>
<text style="margin-left: 10rpx;">进度：{{item.progress}}</text>
<text style="margin-left: 10rpx;" v-if="item.responseText">服务端返回演示：{{item.responseText.code}}</text>
<text @click="clear(item.name)"
style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;">删除</text>
</view> -->
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<!-- <view v-for="(item,index) in wxFiles" :key="index">
<text>{{item.name}}</text>
<text style="margin-left: 10rpx;">大小：{{item.size}}</text>
<text style="margin-left: 10rpx;">状态：{{item.type}}</text>
<text style="margin-left: 10rpx;">进度：{{item.progress}}</text>
<view>
<button>删除</button>
</view>
</view> -->
<!-- #endif -->
<!-- </view> -->
</view>
</template>
<script>
import {
apiURL
} from "@/environments/environment.ts";
export default {
name: "uploadFile",
props: ['requestVO','deformats','opacity','instantly'],
emits:['sendPath'],
data() {
return {
// 上传接口参数
option: {
// 上传服务器地址，此地址需要替换为你的接口地址
url: `${apiURL}/file/upload`,
// 上传附件的key
name: 'file',
// 根据你接口需求自定义请求头
header: {
'X-Authorization': uni.getStorageSync('uni-token') ? uni.getStorageSync('uni-token') : ''
},
// 根据你接口需求自定义body参数
formData: {
requestVO: JSON.parse(this.requestVO)
}
},
// 选择文件后是否立即自动上传，true=选择后立即上传
instantly: true,
// 必传宽高且宽高应与slot宽高保持一致
width: '100%',
height: '100rpx',
// 限制允许选择的格式，空串=不限制，默认为空png,jpg,mp4,pdf,.docx
formats: this.deformats,
// 文件上传大小限制
size: 50,
// 文件回显列表
files: new Map(),
// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
wxFiles: [],
// 是否打印日志
debug: true,
// 演示用
tabIndex: 0,
list: [],
}
},
onReady() {
setTimeout(() => {
console.log('----演示动态更新参数-----');
this.$refs.lsjUpload.setData('formData.orderId', '动态设置的参数');
console.log('以下注释内容为-动态更新参数更多演示，放开后可查看演示效果');
// 修改option对象的name属性
// this.$refs.lsjUpload.setData('name','myFile');
// 修改option对象的formData内的属性
// this.$refs.lsjUpload.setData('formData.appid','1111');
// 替换option对象的formData
// this.$refs.lsjUpload.setData('formData',{appid:'222'});
// option对象的formData新增属性
// this.$refs.lsjUpload.setData('formData.newkey','新插入到formData的属性');
// ---------演示初始化值，用于已提交后再次编辑时需带入已上传文件-------
// 方式1=传入数组
let files1 = [{
name: '1.png'
},
{
name: '2.png',
}
];
// 方式2=传入Map对象
let files2 = new Map();
files2.set('1.png', {
name: '1.png'
})
// 设置初始files列表
this.$refs.lsjUpload.setFiles(files1);
}, 2000)
},
methods: {
// 某文件上传结束回调(成功失败都回调)
onuploadEnd(item) {
console.log(`${item.name}已上传结束，上传状态=${item.type}`);
// 更新当前状态变化的文件
// this.files.set(item.name, item);
// 演示上传完成后取服务端数据
if (item['responseText']) {
console.log('演示服务器返回的字符串JSON转对象');
// this.files.get(item.name).responseText = JSON.parse(item.responseText);
this.$emit('sendPath',item.responseText)
}
// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
// #ifdef MP-WEIXIN
this.wxFiles = [...this.files.values()];
// #endif
// 强制更新视图
this.$forceUpdate();
// ---可删除--演示判断是否所有文件均已上传成功
let isAll = [...this.files.values()].find(item => item.type !== 'success');
if (!isAll) {
console.log('已全部上传完毕');
} else {
console.log(isAll.name + '待上传');
}
},
// 上传进度回调
onProgress(item) {
// 更新当前状态变化的文件
// this.files.set(item.name, item);
// console.log('打印对象', JSON.stringify(this.files.get(item.name)));
// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
// #ifdef MP-WEIXIN
this.wxFiles = [...this.files.values()];
// #endif
// 强制更新视图
this.$forceUpdate();
},
// 文件选择回调
onChange(files) {
// 更新选择的文件
this.files = files;
// 强制更新视图
this.$forceUpdate();
// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
// #ifdef MP-WEIXIN
this.wxFiles = [...this.files.values()];
// #endif
},
// 手动上传
upload() {
// name=指定文件名，不指定则上传所有type等于waiting和fail的文件
this.$refs.lsjUpload.upload();
},
// 移除某个文件
clear(name) {
// name=指定文件名，不传name默认移除所有文件
this.$refs.lsjUpload.clear(name);
},
/**
* 以下为演示
*/
// DOM重排演示，重排后组件内部updated默认会触发show方法,若特殊情况未能触发updated也可以手动调用一次show()
// 什么是DOM重排？自行百度去~
add() {
this.list.push('DOM重排测试');
},
// 切换视图演示，APP端因为是webview，层级比view高，
// 此时若不希望点击触发选择文件，需要手动调用hide()
// 手动调用hide后，需要调用show()才能恢复触发面
onTab(tabIndex) {
this.tabIndex = tabIndex;
if (tabIndex == 0) {
this.$nextTick(() => {
this.$refs.lsjUpload.show();
})
} else {
this.$refs.lsjUpload.hide();
}
},
// 打开nvue窗口
open() {
uni.navigateTo({
url: '/pages/nvue-demo/nvue-demo'
});
}
}
}
</script>
<style>
</style>
pages/certifyDetail/uploadinformation.vue
...@@ -41,6 +41,9 @@ ...@@ -41,6 +41,9 @@
</view> </view>
<view class="uploadpdf" @click="uploadFile()"> <view class="uploadpdf" @click="uploadFile()">
<view class="uploadimg"> <view class="uploadimg">
<view class="uploadFileBox" v-if="status != 3">
<uploadFile :deformats="formats" :opacity="0" ref="uploadRef" :height="'320rpx'" :instantly="'true'" :requestVO="JSON.stringify(dataForm)" @sendPath="getPath"></uploadFile>
</view>
<view class="" style="width: 50px;"> <view class="" style="width: 50px;">
<image class="image" src="../../static/myteam/Group1646.png"></image> <image class="image" src="../../static/myteam/Group1646.png"></image>
</view> </view>
...@@ -61,13 +64,14 @@ ...@@ -61,13 +64,14 @@
</template> </template>
<script> <script>
import { import {ref} from "vue";
uploadFilepdf import uploadFile from "@/components/uploadFile/uploadFile.vue";
} from '@/util/uploaderFile'
import api from "@/api/api"; import api from "@/api/api";
export default { export default {
components:{uploadFile},
data() { data() {
return { return {
formats:'pdf',
dataForm: { dataForm: {
loginId: "1", loginId: "1",
targetType: "5", targetType: "5",
...@@ -100,6 +104,9 @@ ...@@ -100,6 +104,9 @@
}, },
methods: { methods: {
getPath(e){
console.log(e,'=======================')
},
async getquerySignUpInfo() { async getquerySignUpInfo() {
let UserSignUpInfoQueryRequestVO = { let UserSignUpInfoQueryRequestVO = {
userSignUpId:this.openForm.signupId userSignUpId:this.openForm.signupId
...@@ -162,19 +169,9 @@ ...@@ -162,19 +169,9 @@
icon: 'none' icon: 'none'
}); });
return false return false
}else{
} }
let that = this;
uploadFilepdf(this.dataForm)
.then(res => {
console.log(res, 54854)
// that.headUrl = res[0].url
// this.fileForm = {
// name: res.name,
// filePath: res.data.filePath
// }
this.openForm.fileName = res.name
this.openForm.planBookPdfUrl = res.data.filePath
})
}, },
} }
} }
...@@ -202,12 +199,19 @@ ...@@ -202,12 +199,19 @@
.uploadimg { .uploadimg {
height: 160px; position: relative;
height: 320rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.uploadFileBox{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.image { .image {
width: 50px; width: 50px;
height: 43px; height: 43px;
......
uni_modules/lsj-upload/components/lsj-upload/LsjFile.js
...@@ -304,7 +304,7 @@ export class LsjFile { ...@@ -304,7 +304,7 @@ export class LsjFile {
let {url,name,method='POST',header,formData} = this.option; let {url,name,method='POST',header,formData} = this.option;
let form = new FormData(); let form = new FormData();
for (let keys in formData) { for (let keys in formData) {
form.append(keys, formData[keys]) form.append(keys, JSON.stringify(formData[keys]));
} }
form.append(name, item.file); form.append(name, item.file);
let xmlRequest = new XMLHttpRequest(); let xmlRequest = new XMLHttpRequest();
......
uni_modules/lsj-upload/hybrid/html/uploadFile.html
...@@ -57,7 +57,8 @@ ...@@ -57,7 +57,8 @@
try{ try{
_this.option = JSON.parse(option); _this.option = JSON.parse(option);
}catch(e){ }catch(e){
console.error('参数设置错误') console.error('参数设置错误');
console.error(e);
} }
}, },
async upload(name=''){ async upload(name=''){
...@@ -121,7 +122,7 @@ ...@@ -121,7 +122,7 @@
let {url,name,method='POST',header={},formData={}} = this.option; let {url,name,method='POST',header={},formData={}} = this.option;
let form = new FormData(); let form = new FormData();
for (let keys in formData) { for (let keys in formData) {
form.append(keys, formData[keys]) form.append(keys, JSON.stringify(formData[keys]))
} }
form.append(name, item.file); form.append(name, item.file);
let xmlRequest = new XMLHttpRequest(); let xmlRequest = new XMLHttpRequest();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment