【element文件上传失败 但是已上传文件列表仍显示】

element文件上传失败 但是已上传文件列表仍显示

在这里插入图片描述

解决方法,判断状态码,上传组件upload绑定ref为refName

  <el-upload
                  class="upload-demo"
                  action="/api/imageInfo/uploadFiles"
                  :data="uploadData"
                  :on-success="(res) => UploadFilesSuccess(res, item)"
                  :on-remove="(file) => UploadFilesRemove(item, file, fileList)"
                  :file-list="fileList"
                  :before-upload="beforeUpload"
                  drag
                  ref="refName"   //****
                >
                  <div class="el-upload__text">
                    <i class="el-icon-upload"></i> 将文件拖到此处,或<em
                      >点击上传</em
                    >
                  </div>
                </el-upload>
this.$refs.refName[0].uploadFiles.splice(
          this.$refs.refName[0].uploadFiles.indexOf(item),
          1
        );

因为我的数据是数组循环出来的所以refName后面跟了下标,正常的就是this…$refs.refName.uploadFiles就可以

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
什么是SWFUpload?   SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 [编辑本段]SWFUpload的主要特点   * 可以同时上传多个文件;   * 类似AJAX的无刷新上传;   * 可以显示上传进度;   * 良好的浏览器兼容性;   * 兼容其他JavaScript库 (例如:jQuery, Prototype等);   * 支持Flash 8和Flash 9;   SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。   在使用SWFUpload之前,请确认你具备一定的JavaScript和DOM知识。在实际开发中,大部分的错误都是由于错误的设置和低劣的Event Handlers处理程序所造成的。 [编辑本段]文档中文翻译   http://www.v-sky.com/doc/swfupload/v2.1.0/Documentation.html [编辑本段]效果演示   * Classic Form Demo http://demo.swfupload.org/formsdemo ;   * Features Demo http://demo.swfupload.org/featuresdemo ;   * Application Demo http://demo.swfupload.org/applicationdemo ;   * v1.0.2 Plugin Demo http://demo.swfupload.org/v102demo ; [编辑本段]选择合适的Flash控件   在发行包(SWFUpload v2)中含有2个版本的Flash控件(swfupload_f8.swf 与wfupload_f9.swf),其中第一个版本拥有最佳的兼容性,但是为此损失了部分功能;而第二个版本提供了一些附加的功能但是损失了兼容性。 [编辑本段]SWFUpload的初始化与配置   首先,在页面中引用SWFUpload.js ,如      然后,初始化SWFUpload ,如   var swfu;   window.onload = function () {   swfu = new SWFUpload({   upload_url : "http://www.swfupload.org/upload.php",   flash_url : "http://www.swfupload.org/swfupload_f9.swf", file_size_limit : "20480"   });   };   以下是一个标准的SWFUpload初始化设置所需的参数,你可以根据需要自己进行删减:   {   upload_url : "http://www.swfupload.org/upload.php", 处理上传请求的服务器端脚本URL   file_post_name : "Filedata", 是POST过去的$_FILES的数组名   post_params : {   "post_param_name_1" : "post_param_value_1",   "post_param_name_2" : "post_param_value_2",   "post_param_name_n" : "post_param_value_n"   },   file_types : "*.jpg;*.gif", 允许上传的文件类型   file_types_description: "Web Image Files", 文件类型描述   file_size_limit : "1024", 上传文件体积上限,单位MB   file_upload_limit : 10, 限定用户一次性最多上传多少个文件,在上传过程中,该数字会累加,如果设置为“0”,则表示没有限制   file_queue_limit : 2, 上传队列数量限制,该项通常不需设置,会根据file_upload_limit自动赋值   fl
如果您在使用 ElementUI 中的 el-upload 组件时无法获取到上传的文件,请确保您已经正确设置了 el-upload 组件的属性和事件。 首先,您需要设置 el-upload 的属性 `action`,该属性指定文件上传的地址。例如: ```html <el-upload class="upload-demo" action="/your-upload-url" :on-success="handleSuccess" :before-upload="beforeUpload"> <el-button slot="trigger" type="primary">选取文件</el-button> <el-button type="success" v-if="showBtn">上传服务器</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> ``` 其中,`:on-success` 属性指定了上传成功后的回调函数,`:before-upload` 属性指定了上传前的回调函数。 接着,您需要在 Vue 实例中定义 `handleSuccess` 和 `beforeUpload` 方法,以处理上传成功和上传前的操作。例如: ```javascript export default { data() { return { fileList: [] } }, methods: { handleSuccess(response, file, fileList) { console.log(response, file, fileList) }, beforeUpload(file) { console.log(file) this.fileList.push(file) } } } ``` 在 `handleSuccess` 事件回调函数中,您可以获取到上传成功后服务器返回的响应数据、上传的文件对象和上传文件列表。在 `beforeUpload` 事件回调函数中,您可以获取到当前上传的文件对象,并将其添加到文件列表中。 如果您仍然无法获取到上传的文件,请检查您的代码是否存在其他问题,例如文件上传的地址是否正确、上传组件是否正确绑定了事件等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值