file上传文件,获取文件的路径回显

这个是可以适应多种浏览器的方法

//图片预览路径
function getObjectURL(file) {
    var url = null;
    if(window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if(window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if(window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}

获取file对象

var imgurl = getObjectURL($("#file1")[0].files[0]);

//  #file1:file表单的对象id    

//$("#file1")[0]  这个是把jquery对象转js对象

//$("#file1")[0].files[0]   这个是有可能选多个文件  取第一个

//  var imgurl  返回的这个就是选中的文件的路径,就可以使用了

 

 

引用\[1\]中的代码展示了在Element UI中实现文件上传的方法。在上传文件的回调函数中,通过将文件数据放入FormData对象中,然后将该对象作为参数传递给后台进行读写操作。后台将前端传过来的图片地址存入数据库。 引用\[2\]中的配置展示了在Spring Boot项目中配置文件上传路径和图片访问路径。通过配置nginx代理路径,可以实现图片的回显。 引用\[3\]中的代码展示了如何通过后端接口获取具体的图片地址,并将其赋值给图片上传组件的file-list属性来进行展示。在赋值时,需要按照\[{name: '', url: ''}\]的格式进行赋值,以便正确回显图片。 因此,要实现Element UI中文件上传的回显,可以按照以下步骤进行操作: 1. 在文件上传的回调函数中,将后台返回的图片地址赋值给file-list属性,按照\[{name: '', url: ''}\]的格式进行赋值。 2. 在页面中使用图片上传组件,并将file-list属性绑定到回显的图片数据上。 3. 配置nginx代理路径,确保图片能够正确访问。 这样,上传的文件就可以在Element UI中进行回显了。 #### 引用[.reference_title] - *1* *2* *3* [springboot+vue+elementUi 实现多文件文件上传,并且通过配置nginx 回显图片](https://blog.csdn.net/qq_42797435/article/details/123874800)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值