vue+elementUi+el-upload上传文件、获取本机文件路径

最新推荐文章于 2024-04-16 15:12:00 发布
最新推荐文章于 2024-04-16 15:12:00 发布
阅读量2.2w 收藏 45
点赞数 5
分类专栏： 前端 文章标签： vue.js elementui javascript
原文链接：https://blog.csdn.net/weixin_51157081/article/details/124638850
版权 
<el-upload
	action=""
	:limit="1"
	:on-change="handleChange"
	:auto-upload="false"
	:file-list="fileList"
	:show-file-list="false"
>
handleChange(file, fileLists) {
			console.log(file);
			console.log(fileLists);
			// 本地服务器路径
			console.log(URL.createObjectURL(file.raw));
			// 本地电脑路径
			console.log(document.getElementsByClassName("el-upload__input")[0].value); 
		},

Passerby_OK
关注
  • 5
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
element的上传如何获取路径_利用FileReader读取element-ui中上传组件el-upload上传的文件，实现先本地预览后上传至服务器（Vue）...
weixin_29322049的博客
02-23 5231
用elment-ui的上传组件上传用户头像时发现它的图片预览是需要先将图片发送到服务器，返回一个图片地址，然后根据这个地址在头像区显示，但是我想要的是：选取头像，后立即在头像区显示，(不涉及图片剪辑和图片区域选取)，而不是先上传到服务器。那么就需要获取一个图片在本地的地址。 - 浏览器出于安全考虑不让直接获取本地图片的路径，那我们就使用FileReader ( 或window.URL )去读取选择...
通过vue获得 用户上传的路径
qq_54478931的博客
05-18 1910
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <linkrel="stylesheet"href="h...
el-upload获取文件在本机的地址
一名女程序猿的博客
06-09 3945
【代码】el-upload获取文件在本机的地址。
vue+elementUi+el-upload实现上传、获取本机服务器路径、URL、document、createObjectURL、getElementsByClassName
05-07 1万+
vue+elementUi+el-upload实现上传、获取本机服务器路径、URL、document、createObjectURL、getElementsByClassName
使用el-upload组件读取excel文件里的内容并通过xlsx插件转为json格式输出
最新发布
CSDN18202250010的博客
04-16 252
【代码】通过 el-upload 上传组件选取文件。
java上传实现 spring boot +element ui
weixin_48913290的博客
07-26 2691
基于niua框架 的上传实现 结合spring boot 前端element ui
JavaWeb实现文件的上传和下载
qq_47155275的博客
11-01 746
目录结构文件的上传一，准备工作1.导入依赖2.前端页面核心代码3.web.xml配置映射Servlet二，后端代码实现文件的下载一，准备工作1.前端页面2.web.xml配置映射Servlet二，后端代码实现 文件的上传 一，准备工作 1.导入依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId&gt
在使用el-upload时，获得选取文件的本地路径
qq_42122531的博客
07-20 2万+
网上各种文章看过后貌似都没有发现，通过el-upload如何获取本地文件路径的方法 1、百思不得其解后,让我回想起了原生input框是如何调本地文件获取路径 <inputtype="file"id="file"> console.log(document.getElementById("file").value) 2、同理，el-uplo...
elupload获取文件名与路径_Linux技巧：介绍从目录路径获取文件名和目录前缀的方法
weixin_39814925的博客
11-29 2538
本篇文章介绍下面三个内容：使用 dirname 命令获取路径名的目录部分使用 basename 命令获取路径名的文件名部分使用 bash 的参数扩展获取文件名的后缀名使用 dirname 命令获取路径名的目录部分在 Linux 中，可以使用 dirname 命令获取路径名的目录部分，不包含路径名最后的文件名。查看 man dirname 的说明如下：dirname [OPTION] NAME......
elementUI使用el-upload上传文件写法总结及避坑，上传图片/视频到本地/服务器以及回显+删除
热门推荐
coderYYY的博客
09-04 2万+
element上传文件
Js获取上传文件的绝对路径时总是的到C:\fakepath\+文件名称 解决方案
weixin_44785209的博客
02-22 1316
Internet选项 > 安全 > 自定义级别 > 将文件上传到服务器时包含本地目录路径（启用）最近上传文件获取绝对路径总是 获取到C:\fakepath+文件名称。
SmartUpload的使用及相关操作（上传文件控制和保存文件命名）
08-12
使用SmartUpload编写的代码进行文件上传。 控制文件类型及文件大小，也可以实现批量上传。 使用IP时间戳对文件进行命名。 程序的扩展性比较墙。
element-path:元素获取和查询的路径
05-19
元素路径 元素获取和查询的路径。 例子 var ep = new ElementPath ( ) var element = document . querySelect ( 'a:nth-child(2)' ) var path = ep . get ( element ) console . log ( element === ep . query ( path ) ) // true var ep = new ElementPath ( { tags : 'textarea,section,div' } ) var element = document . querySelect ( 'a:nth-child(2)' ) var path = ep . get ( element ) console . log ( element === ep . query ( pat
vue实现文件上传读取及下载功能
10-16
主要为大家详细介绍了vue实现文件上传读取及下载功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最新的vue读取本地json文件代码
01-23
最新的vue读取本地json文件数据，下载解压，运行cmd,cd到这个目录，运行npm yun dev,然后直接访问就能获取数据
vue+axios+el-upload实现文件上传（带参数）：
01-03
备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉； async uploadFile(...
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
主要介绍了vue+elementUI(el-upload)图片压缩,默认同比例压缩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE+elementui组件在table-cell单元格中绘制微型echarts图
10-15
主要介绍了VUE+elementui组件在table-cell单元格中绘制微型echarts图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue+elementui普通上传和大文件分片上传
06-06
Vue+elementui的普通上传可以使用elementui中的el-upload组件，具体步骤如下： 1. 在Vue组件中引入el-upload组件。 ``` <template> <el-upload action="https://www.example.com/upload" :headers="{Authorization: 'Bearer ' + token}" :data="{id: fileId}" :on-success="handleSuccess" :on-error="handleError" :on-progress="handleProgress"> <el-button>点击上传</el-button> </el-upload> </template> <script> import {ElUpload, ElButton} from 'element-ui'; export default { components: {ElUpload, ElButton}, data() { return { token: 'your_token', fileId: 'your_file_id' }; }, methods: { handleSuccess(response, file, fileList) { console.log(response); }, handleError(error, file, fileList) { console.log(error); }, handleProgress(event, file, fileList) { console.log(event); } } }; </script> ``` 2. 在el-upload组件中设置上传的地址、请求头、上传数据、上传成功回调、上传失败回调和上传进度回调等参数。 3. 在上传成功回调函数中处理上传成功后的逻辑。 大文件分片上传可以使用如下步骤： 1. 前端将大文件分为若干个片段，并将每个片段上传到后端。 2. 后端将每个片段存储在服务器上，并返回每个片段的文件名和存储路径。 3. 前端将每个片段的文件名和存储路径组成一个数组，发送给后端。 4. 后端将数组中的每个片段按照顺序合并成一个完整的文件。 5. 前端可以在上传过程中显示上传进度，并支持暂停、恢复和取消上传。可以使用Vue+elementui+axios实现大文件分片上传。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值