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
159 个评论
要回复文章请先登录或注册
8***@qq.com
1***@qq.com
2***@qq.com
1***@qq.com
DCloud_UNI_GSQ (作者)
西洲
y***@126.com
小瓶盖1
s***@gmail.com
2***@qq.com