//选择上传文件的按钮和提交文件上传按钮
<button @click="onUpload">选择上传的文件</button>
<button @click="submitUpload">上传</button>
//onUpload-------wx.chooseMessageFile先将文件上传到微信的 暂存区,打印res可以看到一个暂存的路径
// let headers = {
// 'Content-Type': "multipart/form-data"
// };这个是为了小程序在真机测试校验协议时能够被通过,
// 我之前没加这个的时候不能通过真机的校验,但是在电脑本地测试没有问题。
onUpload(){
let that =this;
let headers = {
'Content-Type': "multipart/form-data"
};
wx.chooseMessageFile({
success: function (res) {
that.tempFilePaths = res.tempFiles[0].path
that.filename = res.tempFiles[0].name
},
});
},
//将保存在微信暂存区的文件上传到你项目的保存地址
submitUpload(){
uni.uploadFile({
url: '',//这里的url是你项目文件上传的接口
filePath: this.tempFilePaths,//这是你上传文件到微信暂存区的 路径
name: 'file',
//这里也是为小程序在真机测试校验协议时能够被通过,
//你可以直接在 data里面定义这个变量,上面那个方法里面的headers可以不定义。
header:{
...headers
},
//这个是上传文件 需要的参数,具体看你们项目接口需要提交的参数
formData: {
file_mis_id:this.contractList.mis_id,
file_name:this.filename
},
success (res){
const data = res.data
if(res.statusCode==200){
uni.showToast({
title: '上传成功',
icon: "success"
})
}else{
uni.showToast({
title: '上传失败',
icon: "none"
})
}
}
})
}
}
//技术不够,研究了两天才解决的功能,也是在看了很多博客之后才完成的,希望能够帮助到你,还请点个赞,谢谢
微信小程序实现文件上传功能
最新推荐文章于 2024-08-02 00:07:06 发布