Form-Upload上传

旧城等待， 2022-03-30 02:07 276阅读 0赞

<el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]

<el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

### Attribute ###

<table> 
 <thead> 
  <tr> 
   <th style="width:127px;">参数</th> 
   <th style="width:477px;">说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:127px;">action</td> 
   <td style="width:477px;">必选参数，上传的地址</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">multiple</td> 
   <td style="width:477px;">是否支持多选文件</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">show-file-list</td> 
   <td style="width:477px;">是否显示已上传文件列表</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">on-preview</td> 
   <td style="width:477px;">点击文件列表中已上传的文件时的钩子</td> 
   <td>function(file)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">on-remove</td> 
   <td style="width:477px;">文件列表移除文件时的钩子</td> 
   <td>function(file, fileList)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">on-success</td> 
   <td style="width:477px;">文件上传成功时的钩子</td> 
   <td>function(response, file, fileList)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>on-change</td> 
   <td>文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用</td> 
   <td>function(file, fileList)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">before-upload</td> 
   <td style="width:477px;">上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。</td> 
   <td>function(file)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">before-remove</td> 
   <td style="width:477px;">删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。</td> 
   <td>function(file, fileList)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>list-type</td> 
   <td>文件列表的类型</td> 
   <td>string</td> 
   <td>text/picture/picture-card</td> 
   <td>text</td> 
  </tr> 
  <tr> 
   <td>auto-upload</td> 
   <td>是否在选取文件后立即进行上传</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">file-list</td> 
   <td style="width:477px;">上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]</td> 
   <td>array</td> 
   <td>—</td> 
   <td>[]</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">limit</td> 
   <td style="width:477px;">最大允许上传个数</td> 
   <td>number</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">on-exceed</td> 
   <td style="width:477px;">文件超出个数限制时的钩子</td> 
   <td>function(files, fileList)</td> 
   <td>—</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

### Slot ###

<table> 
 <thead> 
  <tr> 
   <th>name</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>trigger</td> 
   <td> <p>触发文件选择框的内容</p> <p>&lt;el-button slot="trigger" size="small" type="primary"&gt;选取文件&lt;/el-button&gt;</p> </td> 
  </tr> 
  <tr> 
   <td>tip</td> 
   <td> <p>提示说明文字</p> <p>&lt;div class="el-upload__tip" slot="tip"&gt;只能上传jpg/png文件，且不超过500kb&lt;/div&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: /images/20220330/05305521e0134f28b2fb51953fe99b42.png