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.注意事項