Appearance
上传模块
集成和使用ESUploadModule
模块。
ESUploadManager
是对ESUploadModule
进一步封装。- 开发者可以直接使用
ESUploadModule
。建议直接使用ESUploadManager
。
集成
package.json
引入库
点击查看源码
js
"@extscreen/es-uploader": "x.x.x"
初始化上传模块
示例代码
点击查看源码
js
ESUploadManager.init().then(
() => {
},
error => {
}
)
开始上传
示例代码
点击查看源码
js
ESUploadManager.upload(
this.uploadUrl,//上传接口
this._mediaType,//文件类型
this._filePramsKey,//参数
this.filePath,//文件路径
this.uploadParams//上传接口其他参数
)
监听上传状态
示例代码
点击查看源码
js
export default {
mixins: [ESUpload],
methods: {
onESUploadStart(params) {
},
onESUploadSuccess(params) {
},
onESUploadError(params) {
},
}
}
完整示例
示例代码
点击查看源码
vue
<template>
<div class="es-sdk-root-css">
<title class="es-sdk-content-title-css" :text="this.$options.name"/>
<div class="es-sdk-content-divider-css"/>
<div class="es-sdk-content-column-css">
<text :text="'上传状态:' + text"></text>
<text-button text="点击上传" @onButtonClicked="onButtonClicked"/>
</div>
</div>
</template>
<script>
import {ESPage} from "@extscreen/es-core";
import {ESUpload, ESUploadManager} from "@extscreen/es-uploader";
export default {
name: "上传模块",
mixins: [ESPage, ESUpload],
data() {
return {
text: '',
uploadUrl: "http://baidu.com",
mediaType: "multipart/form-data",
filePramsKey: "file",
uploadParams: {
format: "mp3",
},
filePath: '/data/data/xxxx/demo.mp3'
}
},
methods: {
onESCreate(params) {
ESUploadManager.init().then(
() => {
},
error => {
}
)
},
//---------------上传状态回调----------------------------------
onESUploadStart(params) {
this.text = '上传开始:' + JSON.stringify(params);
},
onESUploadSuccess(params) {
this.text = '上传成功:' + JSON.stringify(params);
},
onESUploadError(params) {
this.text = '上传错误:' + JSON.stringify(params);
},
//-----------------------------------------------------------
onButtonClicked() {
ESUploadManager.upload(
this.uploadUrl,
this._mediaType,
this._filePramsKey,
this.filePath,
this.uploadParams
)
}
}
}
</script>
<style>
</style>