美文网首页
input原生 上传 图片 或视频

input原生 上传 图片 或视频

作者: 风中凌乱的男子 | 来源:发表于2020-08-12 14:05 被阅读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;
        }
      }
    

    相关文章

      网友评论

          本文标题:input原生 上传 图片 或视频

          本文链接:https://www.haomeiwen.com/subject/ycnpdktx.html