注册登录

DCloud_UNI_GSQ

发布：2019-01-26 11:31
更新：2025-02-24 16:46
阅读：188082

uni-app 选择和上传非图像、视频文件

分类：uni-app

上传文件上传

小程序和H5端，参考： https://uniapp.dcloud.io/api/media/file

App端，可以使用如下方法：

使用 web-view 组件，在 web-view 组件内可以使用 input 元素进行选择，使用表单或者 xhr 上传。
在插件市场搜索原生插件：https://ext.dcloud.net.cn/search?q=file

关联阅读：视频、图片、各种文件推荐上传到uni-cdn，帮你节省至少30%的 CDN 费用！详情

21 赞关注分享

154 个评论

要回复文章请先登录或注册

西洲

h5端可以解决，小程序呢，如何上传

2019-10-23 18:49

y***@126.com

回复 1***@qq.com ：

安卓端解决了，现在在考虑怎么处理ios端

2019-10-21 16:49

小瓶盖1

plus.gallery.pick 选择视频，uni.uploadFile上传，还是返回data为空，500呀，怎么解决！！！

2019-10-12 16:12

s***@gmail.com

app端plus.gallery.pick选择非图片、视频的bug，4年了还没解决吗？

2019-10-12 00:05

2***@qq.com

被这个上传非图片文件坑了3天，最后成功了。总结下，同样被坑的可以参考。
后台：以表单提交的方式接收
前端：H5端，非app，传docx，将上传功能封装成了组件
HBuilderX版本：2.2.1.20190813
方法：使用 js 创建 input 元素进行选择
html
```
<view ref="input" class="input"></view>
<view @tap="uploadBtn">
<text>请选择</text><uni-icon type="forward" size=18></uni-icon>
</view>
```
js
```
// 组件中，mounted 页面初始化的方法
mounted() {
var input = document.createElement('input')
input.style.display = 'none'
input.type = 'file'
input.id = 'file';
var _this = this;
this.$refs.input.$el.appendChild(input);
input.onchange = (event) => {
var file = event.target.files[0];
//上传方法
_this.uploadAPI(file)
}
}，
methods:{
// 上传附件按钮绑定file的点击事件
uploadBtn() {
return document.getElementById("file").click();
},
}
```
失败一：使用uni.uploadFile方法
```
methods:{
uploadAPI(path){
//path是上面传进来的File对象
uni.uploadFile({
url: url, //上传地址
filePath:URL.createObjectURL(path), //blob格式，或者转base64，结果一样
name:'file',
header:{"Content-Type": "multipart/form-data"},
formData:data, //其它参数
success: (e) => {
console.log(e); //后台返回：获取失败。后台无法获取上传的文件，传的是空
},
fail: (e) => {
console.log(e);
}
})
}
}
```
失败二：使用表单上传，FormData上传参数
FormData对象：创建一个空对象，使用append添加数据，实现表单数据的序列化
```
methods(){
uploadAPI(path){
var fData = new FormData();
fData.append("file",path); //其它参数也可以添加，或者拼接到url上
uni.request({
url: url?id=1&name=123,
data:fdata,
//以下设置是对上传数据进行处理
"Content-Type":multipart/form-data, //这样设置后，后台无法正常获取文件，
"process-data":false,
//header:{"Content-Type": "multipart/form-data","process-data":false},
//另一种设置，都是避免自动对数据进行转换（实在是没办法了，什么都尝试下）
//"Content-Type":false
//"process-data":false
success: (res) => {
console.log(res);
//[system] request:fail parameter `data`. Expected Object, String, ArrayBuffer, got FormData。
//结果：直接报错，不支持FormData。另外亲测使用ajax是没问题的。
}
})
}
}
```
失败三：使用表单上传，不使用FormData对象，将file手动拼接到请求参数里，后台返回：文件名不能为空。好吧...

尝试四：使用XMLHttpRequest，成功。
```
methods:{
uploadAPI(path){
var fData = new FormData();
fData.append("file",path);
var xhr = new XMLHttpRequest();
xhr.open("POST",url+参数 , true);
xhr.onload = function(e) {
console.log(e); //上传成功
};
xhr.send(fData)
}
}
```
希望有所帮助。

2019-10-10 12:37

j***@126.com

UploadFileF3: function(e) {

var stempFilePaths = "file://" + plus.io.convertLocalFileSystemURL("_doc/" + this.InStoreCsvFile);
var stempDbFilePath = "file://" + plus.io.convertLocalFileSystemURL("_doc/defaultMB.db");

var arrayFiles = [{name:"file1", uri:stempDbFilePath}, {name:"file2", uri:stempFilePaths}];

//console.log(arrayFiles.length);
uni.uploadFile({
//url: 'http://10.180.22.91/fic/default1.aspx?type=SET', //仅为示例，非真实的接口地址
url: this.vWebUrl + "?type=SET",
files: arrayFiles,
//filePath: "file://" + stempFilePaths,
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
console.log("upload ok.");
uni.showToast({
icon: 'none',
title: '提交到服务器成功 !',
duration: 2000
});
},
fail: (fe) => {
console.log(fe);
}

});
},

我直接Copy出来了。支持自定义的文件类型，多文件一起上传。已经送到西了。还不会的请自行调试。
1) storeIn.CSV
2) DefaultMB.db 2个文件一起传到服务。
如果有多个文件，请自行维护上面的arrayFiles 对象。

2019-09-25 15:48

j***@126.com

回复 y***@126.com ：

这个file://是个坑。根本没看到文档。
要查 HBuilder那边的文档拿来试。后面可以了。

2019-09-25 15:44