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

<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); 
		},

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、付费专栏及课程。

余额充值