前言：uniapp的uni.request不支持formData类型，识别不到，转为uni.uploadfile后还是不行，file的文件格式类型不对，后面网上开始找解决方案，发现使用xhr原生的方式就能避免这个问题，后面用xhr上传就可以，主要利用的input的type的file类型，结合原生的formData,然后找了一个类似插件，插件示例不太完善，但是插件是可用的。
插件地址：ext.dcloud.net.cn/plugin?id=1…
使用：这个插件自动进入到uni的modules里面，默认全局引用了
.vue文件
<yt-upload ref="uploadFile" childId="upload1" width="150rpx" :option="uploadFile" :size="99"
:disabled=" type == 'detail'" :count="99" :debug="false" :instantly="true"
v-if="type !== 'detail'" @uploadEnd="onuploadEnd" @progress="upProgress" @change="upChange">
<view
style='background: #007aff;margin-left: 10rpx;padding: 10rpx;text-align: center;border-radius: 2px;color:#ffffff'>
选择附件
</view>
</yt-upload>
<view class="tn-shadow-blur" v-for="(item,index) in formData.files" :key="index">
<text class="tn-color-blue" @click="look(item.fileNames)">{{item.fileNames}}</text>
<text @click="clear(item.fileNames,index)" v-if="type !== 'detail'"
style="margin-left: 30rpx;padding: 0 10rpx;border: 1rpx solid #ff0000;color: #ff0000;margin-top:5px;border: none;">X</text>
</view>
需要自己写一些样式，然后option需要放到data里面，因为在api里面写的uploadFile,
api.js
export function uploadFile(formData){ //上传文件
return {
url: `${config.baseUrl}${api_name}/uploadFile`,
header:{
"token":getToken()
},
name:'file',
formData,
}
}
参数在插件文档里面有，name就是file文件流的name值，formData是其他的参数
业务.vue文件
//文件上传后
onuploadEnd(item) {
// 更新当前窗口状态变化的文件
this.files.set(item.name, item);
//上传完成后取服务端数据
if (item['responseText']) {
this.files.get(item.name).responseText = JSON.parse(item.responseText);
//赋值给表单字段
const type = item.file.type.split('/')[0]
const res_data = this.files.get(item.name).responseText.data
let data = {
fileNames: res_data.fileNames[0],
fileUrls: res_data.fileUrls[0],
type: type
}
this.formData.files = this.formData.files.concat([data])
}
},
//监听文件改变
upChange(files) {
// 更新选择的文件
this.files = files;
// 强制更新视图
this.$forceUpdate();
},
//监听上传进度
upProgress(e) {
},
//查看
look(name) {
let data = this.formData.files.filter(function(item) {
return item.fileNames === name
});
if (data[0].type == 'image') {
uni.previewImage({
current:0,
urls:this.files.get(name)? this.files.get(name).path.split() : data[0].fileUrls.split() //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
})
}
else {
uni.downloadFile({
url: this.files.get(name) ? this.files.get(name).path : data[0].fileUrls, //只能是网络地址
success: function(res) {
var filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
showMenu: true,
success(e) {
console.log('success', e);
},
fail(e) {
console.log('fail', e);
}
});
}
})
}
},
//移除文件
clear(name, index) {
console.log(index, 'index')
this.$refs['uploadFile'].clear(index)
if (this.type == 'edit') {
this.formData.files = this.formData.files.filter(function(item, index1) {
return index1 != index
})
this.fileId = this.fileList.filter((item, index1) => {
return index1 == index
})
} else {
this.formData.files = this.formData.files.filter(function(item, index1) {
return index1 != index
})
}
console.log('afterdelete', this.formData.files)
},
性能问题没有进行测试，兼容性问题应该还好，
