ElementUI的upload插件

1、参数解释

<el-upload
class="upload-demo"
action="/url" //要上传的地址
ref="upload" // 相当于upload标识
:auto-upload="true" // true为自动上传即 拖进去自动和action进行交互
:on-preview="handlePreview" // 点击已上传文件的钩子
:on-error="handleError" // 上传时失败的钩子 (一般没用)
:on-success="handleSuccess" // 上传时 有返回就执行的钩子
:before-remove="beforeRemove" // 删除上传文件前的钩子
:on-remove="handleRemove" // 删除时触发的钩子
:before-upload="beforeAvatarUpload" // upload组件 上传前的钩子函数
:multiple="true" // 上传多个文件
:drag="true" //可以拖动上传
:show-file-list="true" //展示上传的文件列表
:limit="3" // 上传最大个数
:on-exceed="handleExceed" // 上传违反约束的钩子
:file-list="fileList" // 绑定的文件列表data
:data="myData" // 附件上传携带的form参数
>

2、upload上传 contentType为multpart/form格式、换句话说,可以接受二进制图片以及form参数

3、before-upload执行失败后,会自动执行beforeRemove和后面的handleRemove方法,

可以在beforeRemove函数中判断file的状态来阻止

4、el_table中如果不用prop接受参数可以使用以下办法

<el-table-column width="100" prop="RULE_ID" label="RULE_ID"></el-table-column>
<el-table-column width="100" label="UPLOAD_FILE">
  <template slot-scope="scope">
    <div v-for="(item,index) in scope.row.UPLOAD_FILE" :key="index">
      <el-button @click="downloadFile(item)" type="primary" size="mini" style="margin-bottom:3px">查看附件</el-button>
    </div>
  </template>
</el-table-column>

posted @ 2020-05-20 16:49  WAN9SIZHEN9  阅读(265)  评论(0编辑  收藏  举报