vue 清空input file选择的文件

resetUploader() {
    //重写一遍input元素
    document.getElementById('input').outerHTML = document.getElementById('input').outerHTML
    //曾经@change="handleInput"绑定的事件解除了,要重新绑定一遍
    document.getElementById('input').addEventListener('change', this.handleInput)
}

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目上传文件切片可以使用第三方库vue-upload-component来实现。该库支持文件切片上传、进度条显示、取消上传等功能。 首先,安装vue-upload-component: ``` npm install vue-upload-component --save ``` 然后,在需要上传文件的组件中引入vue-upload-component: ```javascript <template> <div> <vue-upload-component ref="upload" :url="uploadUrl" :headers="headers" :data="uploadData" :multiple="false" :accept="'*'" :extensions="[]" :max-size="0" :with-credentials="false" :input-id="'file'" :drop="true" :drop-directory="false" :drop-chunk-size="0" :drop-chunk-threads="1" :drop-delay="0" :drop-timeout="0" :chunk-size="5 * 1024 * 1024" :chunk-retries="3" :chunk-simultaneous-uploads="3" @input-filter="inputFilter" @input-file="inputFile" @input-clear="inputClear" @before-upload="beforeUpload" @start="startUpload" @progress="progressUpload" @success="successUpload" @error="errorUpload" @abort="abortUpload"> </vue-upload-component> </div> </template> <script> import VueUploadComponent from 'vue-upload-component' export default { components: { VueUploadComponent }, data () { return { uploadUrl: 'your_upload_url', headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }, uploadData: { 'foo': 'bar' } } }, methods: { inputFilter (newFile, oldFile, prevent) { // 文件过滤 }, inputFile (file) { // 文件选择 }, inputClear () { // 清空文件选择 }, beforeUpload (file) { // 文件上传前的处理 }, startUpload () { // 开始上传 }, progressUpload (progress) { // 上传进度 }, successUpload (response) { // 上传成功 }, errorUpload (error) { // 上传失败 }, abortUpload () { // 取消上传 } } } </script> ``` 其中,`chunk-size`表示切片大小,`chunk-retries`表示切片上传失败后的重试次数,`chunk-simultaneous-uploads`表示同时上传的切片数量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值