使用jpm-upload控件
jpm-upload
jpm-upload
上传 upload
示例代码
基础用法
<template>
<view class="content">
<jpm-upload :url="url" :name="name" :headers="headers" :formdata="formdata" @upload="upload" @finish="finish">
</jpm-upload>
</view>
</template>
<script>
export default {
data() {
return {
"url": 'http://192.168.0.229:3000/upload',
"name": "files",
"headers": {
},
"formdata": {
}
}
},
onLoad() {
},
methods: {
upload(e) {
console.log('upload=>', e);
},
finish(e) {
console.log('finish', e);
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
参数说明
参数 | 说明 | 类型 | 默认值 | 支持插槽 |
---|---|---|---|---|
url | 必填 | string | - | × |
name | 必填,文件流对应参数 | string | - | × |
headers | 自定义请求头部 | Object | - | × |
formdata | 自定义表单参数 | Object | - | × |
函数说明
函数 | 先决条件 | 说明 | 备注 |
---|---|---|---|
upload | 无 | 上传成功、失败触发 | 事件 |
finish | 无 | 点击完成按钮触发 | 事件 |