【左昌杰的回答：Vue里面的 $event.target.files[0];是什么意思呢】

Vue里面的 $event.target.files[0];是什么意思呢
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(1)
详细描述
截图
代码
<template>
  <div>
    <main>
      <div>
        <div class="new-data-box">
          <span>|</span>
          <span>新增资料</span>
        </div>
        <div class="Data-options-box">
          <!-- 第一个所属科目 -->
          <div>
            <span>所属科目</span>
            <template>
              <el-select v-model="value" placeholder="数学">
                <el-option v-for="item in options" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </div>
          <!-- 第二个所属科目 -->
          <div>
            <span>所属课程/教材</span>
            <template>
              <el-select v-model="value" placeholder="和差倍问题">
                <el-option v-for="item in optionss" :key="item.valuee" :label="item.labell"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </div>
          <!-- 第三个所属课时 -->
          <div>
            <span>所属课时</span>
            <template>
              <el-select v-model="value" placeholder="全部">
                <el-option v-for="item in optionsss" :key="item.valueee" :label="item.labelll"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </div>
        </div>
        <!-- 第三个新增的资料选项 -->
        <div>
          <!-- 价格部分 -->
          <div>
            <span>价格</span>
            <input type="text" style="width: 30px;">
            <span>元</span>
          </div>
          <!-- 文件上传 -->
          <div>
            <span>文件</span>
            <label class="uupfile" for="upfile">上传</label>
            <input id="upfile"  style="margin-left: 3%;width: 70px;display: none;" type="file" @change="xd">
            <img  :src="PatH" id="upfile"  alt="" style="display: block;margin-left: 9.5%;margin-bottom: 2%;width: 42vw;">
            <table class="image">
              <thead>
                <tr>
                  <th>图片名</th>
                  <th>文件大小</th>
                  <th>进度</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
                <tr v-if="imgData">
                  <td>{{imgname}}</td>
                  <td>{{imgSize}}</td>
                  <td class="con">
                   <el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
                  </td>
                  <td></td>
                  <td>
                    <button style="margin-left: 10%;">上传</button>
                    <button style="margin-left: 10%;">删除</button>
                  </td>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        imgData: false, //未上传图片隐藏图片属性
        PatH:{
          },
          imgUrl:'',
          imgname:'',//图片名字
          imgSize:'',//图片大小
        proBar: 0,
        // 请输入价格的部分
         input: '',
        options: [{
          value: '选项1',
          label: '数学'
        }, {
          value: '选项2',
          label: '语文'
        }, {
          value: '选项3',
          label: '外语'
        }],
        value: '',
        optionss: [{
          valuee: '选项1',
          labell: '和差倍问题'
        }, {
          valuee: '选项2',
          labell: '三年级上册'
        }],
        value: '',
        optionsss: [{
          valueee: '选项1',
          labelll: '全部'
        }, {
          valueee: '选项2',
          labelll: '第一课 标点符号'
        }]
      }
    },
    methods:{
      xd($event){
        let file = $event.target.files[0];//声明
        this.imgData= true//未上传图片隐藏图片属性
        this.imgname=file.name//点击的时候让图片名字显示
      }
    }
  }
</script>
<style lang="scss" scoped>
// 新增资料外部样式
  .new-data-box{
    display: flex;
    align-items: center;
    text-align: left;
    height: 40px;
    background-color: cornflowerblue;
  }
  // 条件新增资料外部盒子
  .Data-options-box{
    height: 170px;
    border: 1px solid;
    padding-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
  }
  .uupfile{
    border: 1px solid;
    background-color: cadetblue;
  }
</style>
}
编辑于2025-05-26
[上海|荣耀师兄]JS-左昌杰
当前事件的触发
编辑于2019-04-12