uniapp在H5下选取文件并上传到服务器
uniapp在H5下选取文件并上传到服务器文件可以是图片、ppt、pdf等类型,主要借助于uni.chooseFile进行选择文件,然后借助uni.uploadFile进行上传到服务器。1、html展示,提供一个上传按钮,在提供一个上传成功后展示容器<view class="add-btn"><image src="../../static/images/evidence/add
·
文件可以是图片、ppt、pdf等类型,主要借助于uni.chooseFile进行选择文件,然后借助uni.uploadFile进行上传到服务器。
1、html展示,提供一个上传按钮,再提供一个上传成功后展示容器
<view class="add-btn">
<image src="../../static/images/evidence/add-icon.png" mode=""></image>
<text class="text" @click="openFile">添加附件</text>
</view>
<scroll-view scroll-y >
<view style="padding-bottom: 120rpx;">
<view class="add-image-item" v-for="(file, index) in currentFile">
<text class="add-image-item-name">{{(index + 1) + '.' + file.fileName}}</text>
<image
class="add-image-item-delete"
src="../../../static/image/file_del.png"
@click="currentFile.splice(index, 1)" />
</view>
</view>
</scroll-view>
2、选取文件openFile()
// 打开文件选择器
openFile(){
uni.chooseFile({
count: 1, //默认100
extension:['.zip','.doc','.xls','.pdf','docx','.rar','.7z','.jpg','.png','.jpeg'],
success: (res) =>{
console.log(res);
if(res.tempFiles[0].size / 1024 / 1024 > 20){
this.$refs.uToast.show({
title: '附件大小不能超过20M',
type: 'warning',
})
return;
}
this.resultPath(res.tempFilePaths[0],res.tempFiles[0].name);
}
});
},
3、上传选择的文件resultPath()
// 选取的文件路径获取后回调
resultPath(path,fileName) {
console.log(path)
console.log(fileName)
uni.showLoading({
title: '上传中...',
});
uni.uploadFile({
url: base.baseUrl + '/upload',
filePath: path,
header:{
// "Authorization": "xxx",
// 'content-type':'multipart/form-data; boundary=----WebKitFormBoundaryHEdN1AIjcdUkAaXM',
},
formData: {
// 'user': 'test'
},
success: (uploadFileRes) => {
let obj = JSON.parse(uploadFileRes.data);
if(obj.code == 0){
this.getOssUrl(obj.tmpFileIds[obj.id],fileType,fileName);
}else{
uni.showToast({
title:uploadFileRes.data.returnMessage,
icon:'none',
duration:1500
})
}
},
fail:(err) =>{
this.$refs.uToast.show({
title: '上传失败',
type: 'error',
});
uni.hideLoading();
}
});
},
更多推荐
已为社区贡献1条内容
所有评论(0)