input原生 上传 图片 或视频
2020-08-12 本文已影响0人
风中凌乱的男子
Dom
<el-form-item label="封面图" style="width:66%;">
<span style="display:flex;align-items: center;">
<el-input v-model="form.gameImg" disabled placeholder="选择文件"></el-input>
<span><i class="el-icon-folder-opened" @click="vExampleAdd" style="font-size:18px;background: #5ed2ec;color: #fff;padding: 5px 15px;border-radius: 2px;margin-left: 10px"></i></span>
</span>
<form ref="vExample">
<input type="file" style="display:none;" ref="vExampleFile" @change="vExampleUpload" />
</form>
</el-form-item>
methods:{
vExampleAdd() {
this.$refs.vExampleFile.click()
},
vExampleUpload(e) {
let param = new FormData()
param.append('file', e.target.files[0])
upload(param).then(res => {
console.log(res);
this.form.gameImg = res.data.url
this.$message({
message: '上传成功',
type: 'success'
});
}).catch(err => {
console.log(err);
})
},
}
css:
.el-icon-folder-opened {
&:hover {
cursor: pointer;
background: red !important;
}
}