Element UI库 之 el-upload 图片上传组件多次上传或重新上传失效bug

7 篇文章 0 订阅

  <el-upload

                  :show-file-list="false"

                  ref="upload"

                  :action="actionUrl"

                  :on-change="fileChange"

                  :multiple="false"

                  :limit="1"

                  :headers="header"

                  :on-error="handleAvatarErro"

                  :auto-upload="true"

                  :on-success="handleAvatarSuccess"

                  accept=".bmp,.jpg,.png"

                >

在:on-change方法即本文 fileChange方法中最尾端加上下面这句

   this.$refs.upload.clearFiles(); // 清空当前 files

即可正常使用

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-UIel-upload 组件本身并不支持分片上传,但是我们可以通过使用第三方来实现分片上传的功能。 一种常见的方案是使用 axios 来进行文件上传,并在上传时使用 axios 的分片上传功能。axios 已经内置了分片上传的支持,我们可以使用 axios 的 `axios.post` 方法来上传文件,并使用 `onUploadProgress` 方法来监听上传进度。 首先,我们需要在项目中安装 axios 和 element-ui: ``` npm install axios element-ui --save ``` 然后,我们可以在组件中使用 el-upload 组件上传文件,如下所示: ```html <template> <el-upload class="upload-demo" ref="upload" :action="uploadUrl" :headers="headers" :on-success="handleSuccess" :on-error="handleError" :on-progress="handleProgress" :file-list="fileList" :limit="limit" :multiple="multiple" :data="formData" :auto-upload="autoUpload" :show-file-list="showFileList" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> ``` 其中,我们需要设置 `action` 属性为文件上传的接口地址,同时需要设置 `on-success`、`on-error` 和 `on-progress` 等事件来处理上传成功、上传失败和上传进度。 接下来,我们可以在组件的 `mounted` 钩子函数中初始化 axios 并设置分片大小: ```js import axios from 'axios'; export default { name: 'UploadDemo', data() { return { fileList: [], uploadUrl: 'http://example.com/upload', limit: 3, multiple: true, formData: {}, autoUpload: true, showFileList: true, headers: {}, chunkSize: 5 * 1024 * 1024 // 5MB }; }, mounted() { axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'; axios.defaults.timeout = 60000; // 超时时间 axios.defaults.retry = 3; // 重试次数 axios.defaults.retryDelay = 1000; // 重试间隔 // 设置分片大小 axios.defaults.maxContentLength = this.chunkSize; axios.defaults.maxBodyLength = this.chunkSize; }, methods: { // 上传文件 handleUpload(file) { const formData = new FormData(); formData.append('file', file); return axios.post(this.uploadUrl, formData, { headers: this.headers, onUploadProgress: progressEvent => { const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); console.log(percentCompleted); } }); }, // 上传成功回调 handleSuccess(response, file, fileList) { console.log('上传成功:', response); }, // 上传失败回调 handleError(error, file, fileList) { console.log('上传失败:', error); }, // 上传进度回调 handleProgress(event, file, fileList) { console.log('上传进度:', event.percent); } } }; ``` 在 `handleUpload` 方法中,我们使用 axios 的 `post` 方法来上传文件,并设置了 `onUploadProgress` 方法来监听上传进度。在 `mounted` 钩子函数中,我们设置了 axios 的默认参数,包括超时时间、重试次数、重试间隔和分片大小等。 需要注意的是,由于 el-upload 组件不支持分片上传,因此我们需要手动控制上传的文件数量,以避免同时上传过多的文件导致服务器崩溃。我们可以通过设置 `limit` 属性来控制上传的文件数量,例如设置为 3 表示一次最多只能上传 3 个文件。 另外,如果需要支持断点续传,我们需要在上传文件时记录已上传的文件块数量和位置,并在下次上传时从上次的位置继续上传。这部分内容比较复杂,需要根据具体的需求来实现,这里不再赘述。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值