在使用el-upload时,获得选取文件的本地路径

        网上各种文章看过后貌似都没有发现,通过el-upload如何获取本地文件路径的方法

 

       

        1、百思不得其解后,让我回想起了原生input框是如何调本地文件获取路径

         <input type="file" id="file">

        console.log(document.getElementById("file").value)

         

       

         2、同理,el-upload也是element封装的,所以找到内置的input框class,从而获取input框value值 ,通过返回数组的第一条里找到了value属性值也是上传时的文件路径,这下是真的解决了问题

        console.log(document.getElementsByClassName("el-upload__input"))

         

        

        

       

        3、最后在选取文件触发钩子的时候给file.name赋值(也就是input框获取到的value值)

              file.name = document.getElementsByClassName("el-upload__input")[0].value

        

        

         4、自己也是项目有需求,希望对大家有帮助!!!

 

 

 

你可以使用 `before-upload` 属性来在上传之前触发一个方法,然后在这个方法里面使用 `axios` 或者其他方式来发起请求获取后端路径,最后将路径赋值给 `action` 属性即可。 以下是一个示例代码: ```vue <template> <el-upload class="upload-demo" :action="uploadUrl" :before-upload="beforeUpload" :on-success="onUploadSuccess" :on-error="onUploadError" :auto-upload="false" :file-list="fileList" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button size="small" type="success" @click="submitUpload">上传文件</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </template> <script> import axios from 'axios' export default { data() { return { uploadUrl: '', fileList: [] } }, methods: { beforeUpload(file) { return new Promise((resolve, reject) => { // 发起请求获取后端路径 axios.get('/api/uploadUrl').then(res => { this.uploadUrl = res.data.uploadUrl resolve(file) }).catch(error => { reject(error) }) }) }, onUploadSuccess(response, file, fileList) { this.$message.success('上传成功') }, onUploadError(error, file, fileList) { this.$message.error('上传失败') }, submitUpload() { this.$refs.upload.submit() } } } </script> ``` 在这个示例中,我们使用了 `before-upload` 属性来触发一个方法 `beforeUpload`,在这个方法里面发起了一个请求来获取后端路径,并将路径赋值给 `uploadUrl` 变量。最后,我们将 `uploadUrl` 变量作为 `action` 属性的值传递给 `el-upload` 组件。 这样就实现了在不写死上传路径的情况下,通过外部方法获取后端路径的目的。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值