Vue

Vue+ElementUI上传组件

2018-01-10  本文已影响75人  Lia代码猪崽

这里先说明用到的Element版本1.4.12,官方文档:
http://element.eleme.io/1.4/#/zh-CN/component/upload

<el-form-item>
        <span style="display: inline-block;float:left;margin-left: -100px;width: 100px;font-weight: 700;color: #48576a;text-align: right;padding-right: 10px;">附&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件:</span>
        <el-upload
          class="upload-demo"
          :action="fileAction"
          :headers="myHeader"
          :before-upload="beforeUpload"
          :on-success="uploadSuccess"
          :on-remove="beforeRemove"
          name="file"
          :file-list="fileList">
              <div>
                  <el-button size="small" style="color: #409EFF;border-color: #409EFF;width: 92px;height: 34px;margin-top: -5px">选择文件</el-button>
                  <div slot="tip" class="el-upload__tip" style="margin-top: -7px;margin-bottom: -15px;display: inline-block;padding-left: 5px">
                      只能上传超过大小不超过10M的文件
                  </div>
                </div>
         </el-upload>
</el-form-item>
data() {
      return {
        // 上传的某个文件数据
        file: "",
        // 文件列表
        fileList: [],
        // API接口
        fileAction: "",
        // token在这里传就好了
        myHeader: {
          token: ''
        }
      }
},
methods: {
  // 文档写的很清楚,这里就不说了 
}
上一篇 下一篇

猜你喜欢

热点阅读