1.xe-upload地址：文件选择、文件上传组件（图片，视频，文件等） - DCloud 插件市场
2.由于开发app要用到上传文件组件，uni.chooseFile在app上不兼容，所以找到了xe-upload，兼容性很强，强烈推荐！！！
说明
不占用页面位置的上传组件；
H5、App、微信小程序中可上传图片，视频和文件；其他端暂时只能上传图片和视频
上传图片通过chooseMedia及chooseImage实现
上传视频通过chooseMedia及chooseVideo实现
H5端上传文件通过chooseFile实现
App上传文件通过renderjs实现
微信小程序上传文件通过chooseMessageFile实现
3.使用方法，到插件市场将插件包导入到自己的项目，然后下列方式调用。
<!-- 也可以下载示例项目查看使用方法 -->
<template>
<view>
<button @click="handleUploadClick">上传</button>
<xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload>
</view>
</template>
<script>
export default {
data() {
return {
uploadOptions: {
// url: 'http://192.168.31.185:3000/api/upload', // 不传入上传地址则返回本地链接
},
};
},
methods: {
handleUploadClick() {
// 使用默认配置则不需要传入第二个参数
// type: ['image', 'video', 'file'];
this.$refs.XeUpload.upload('file', {});
// this.$refs.XeUpload.upload('image', {
// count: 6,
// sizeType: ['original', 'compressed'],
// sourceType: ['album'],
// });
},
handleUploadCallback(e) {
// e.type: ['choose', 'success', 'warning']
// choose 是options没有传入url，返回临时链接时触发
// success 是上传成功返回对应的数据时触发
// warning 上传或者选择文件失败触发
// ......
},
},
};
</script>
4.回调绑定callback方法：
回调返回的参数：
'callback.type === success' : [
{
"size": 176579, // 选择的文件的大小
"name": "Kafka.pdf", // 选择的文件的名称（小程序端可能会没有）
"type": "application/pdf",
"tempFilePath": "_doc/uniapp_temp/Kafka-16988473328760.pdf", // 临时路径
"fileType": "file", // 文件类型[image, video, file]
"response": {
"result": {
"fileName": "Kafka.pdf",
"filePath": `http://localhost:3000/upload/e51d814b649122fc64892d0bc6383d07.pdf`,
},
"success": true,
}, // 上传返回的信息
}
]
'callback.type === choose' : [
{
"size": 176579, // 选择的文件的大小
"name": "Kafka.pdf", // 选择的文件的名称（小程序端可能会没有）
"type": "application/pdf",
"tempFilePath": "_doc/uniapp_temp/Kafka-16988473328760.pdf", // 文件临时路径
"fileType": "file", // 文件类型[image, video, file]
}
]5.注意事项