uni-app web端input(file)上传文件
创建上传文件标签<view ref="input" class="input">附件上传</view>// uni-app input不支持type=“file”类型所以需要js创建mounted() {// 创建附件上传var _self = this;var input = document.createElement('input');/...
·
- 创建上传文件标签
<view ref="input" class="input">
附件上传
</view>
// uni-app input不支持type=“file”类型所以需要js创建
mounted() {
// 创建附件上传
var _self = this;
var input = document.createElement('input');//创建元素
input.type = 'file'//添加file类型
input.onchange = (event) => {
_self.upFile(input, event)
}
this.$refs.input.$el.appendChild(input)
},
//上传
methods: {
upFile(input, event) {
var _self = this;
uni.uploadFile({
url: url,
files: [
{
file: input.files[0],
uri: event.srcElement.value
}
],
success: (uploadFileRes) => {
console.log(uploadFileRes)
},
fail: (err) => {
console.log(err)
}
});
},
}
简单封装
<view class="content">
<view ref="input" class="input">
<text>上传文件</text>
</view>
</view>
export default {
props:{
url: String,
accept: {
type: String,
default: ''
}
},
mounted() {
// 创建附件上传
var _self = this;
var input = document.createElement('input');//创建元素
input.type = 'file'; //添加file类型
input.accept = this.accept; //允许上传的文件类型
input.style = 'opacity: 0;width:100px;height:35px;'
input.onchange = (event) => {
_self.upFile(input, event)
}
this.$refs.input.$el.appendChild(input)
},
//上传
methods: {
upFile(input, event) {
var _self = this;
uni.uploadFile({
url: this.url,
files: [
{
file: input.files[0],
uri: event.srcElement.value
}
],
success: (uploadFileRes) => {
_self.$emit('upFileChange', uploadFileRes)
},
fail: (err) => {
console.log('err:'+err)
}
});
},
}
}
.input{
overflow: hidden;
display: inline-block;
position: relative;
background: skyblue;
text{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 14px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
}
使用
属性 | 类型 | 默认值 | 说明 | 必传 |
---|---|---|---|---|
url | String | 上传到服务器的地址 | 是 | |
accept | String | image/jpeg | 允许上传的文件类型 | 否 |
upFileChange | EventHandle | 点击上传文件触发 |
<uploadFile :url="url" :accept="accept" @upFileChange="upFileChange"></uploadFile>
import uploadFile from '文件路径/uploadFile.vue';
export default {
components:{ uploadFile },
data(){
return{
url: '上传服务器地址',
accept: 'image/jpeg' //允许上传的文件类型
}
},
methods:{
upFileChange(val){
console.log(val)
}
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)