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;
    }
  }
上一篇下一篇

猜你喜欢

热点阅读