uni-app图片读取问题

uni-app图片读取只能从静态资源或者使用网络图片

如果想使用本地图片的话需要将路径映射到磁盘路径中去。这里我们在properties中写:

filePath=D:/temp/images/
spring.resources.static-locations=classpath:static/**spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${filePath}

后台代码

@RequestMapping("getimg")
    @ResponseBody
    public String getimg(HttpServletRequest request,@RequestParam MultipartFile file){
        //获取图片名称
        String fname = file.getOriginalFilename();
        //获取图片名称后缀  .png 或 .jpg
        String[] split = fname.split("\\.");
        //图片存储路径  Linux注意不能带冒号:
        String filepath="D:\\temp\\images\\";
        //↓没有横杠的uuid 自行百度
        //String uuid = UtilTool.getUUid();
        UUID uuid = UUID.randomUUID();
        //随机文件名
        String finalname=uuid + "." + split[1];

        //最终路径
        String finalpath=filepath+finalname;



        try {
            file.transferTo(new File(finalpath));
        } catch (IOException e) {
            e.printStackTrace();
        }
                            
        return "http://"+request.getRemoteHost()+":"+request.getServerPort()+"/"+finalname;

    }

链接格式如下

 常见问题总结
1) 不可以将上传来的文件保存到项目地址中,即不可以保存在resource/static目录下,因为这样的话,及时上传成功,也需要重启整个项目才能够通过地址访问到该图片。换言之,target不会因为你上传了图片,就自动更新静态资源。
2) 配置文件中static-location后面配置的那些目录,就是localhost:8080可以直接访问的文件了,也就是说我们现在已经将磁盘的目录配置上了,那么我们存放在E:/Data/uploadFile文件夹中的任何文件就可以直接localhost:8080/文件名进行访问了。
 

 

看了这个大哥写的文章总结的  原文链接:https://blog.csdn.net/yiyexy/article/details/105016786

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 当我们开发uniapp的应用的时候,有时候需要选择本地文件,这时我们可以使用uniapp中的文件选择器API来实现。 首先,我们需要使用uni.chooseImage() API来选择本地图片文件。这个API有一个success的回调函数,可以在选择成功后获取到用户选择的图片路径和临时文件路径。示例代码如下: ``` uni.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths; // 处理选择成功后的逻辑 }, }); ``` 类似的,我们也可以使用uni.chooseVideo() API来选择本地视频文件,并在回调函数中获取到视频文件路径。示例代码如下: ``` uni.chooseVideo({ success: function(res) { var tempFilePath = res.tempFilePath; // 处理选择成功后的逻辑 }, }); ``` 需要注意的是,选择本地文件前需要用户授权,我们需要在manifest.json文件中添加如下的权限配置: ``` "permission":{ "scope.userLocation":{ "desc":"你的权限描述" } } ``` 在使用文件选择器API之前,我们需要确认用户已经授权了该权限,如果没有授权,则需要在代码中先请求该权限。具体步骤可以参考uniapp官方文档。 总的来说,使用uniapp的文件选择器API可以很方便地实现我们选择本地文件的需求,同时需要注意用户权限和选择后的逻辑处理。 ### 回答2: Uniapp是一个跨平台的开发框架,能够实现在同一份代码上同时支持多个主流操作系统和应用商店。在实际项目中,有时需要让用户选择本地文件来进行操作,比如上传文件或者导入数据。那么,Uniapp如何选择本地文件呢?下面就来详细介绍。 首先,Uniapp提供了许多API,可以帮助我们实现选择本地文件的功能。其中比较常用的有uni.chooseImage和uni.chooseFile。uni.chooseImage可用于从相册或拍照中选择图片uni.chooseFile可用于选择文件,包括文档、音频、视频等。在使用这些API时,需要注意一些细节,比如参数设置、回调函数等。具体的可以参考Uniapp官方文档。 其次,如果需要上传文件,可以使用uni.uploadFile API。该API可以将本地文件上传至服务器,并返回上传进度、上传结果等信息。在使用该API时,需要注意上传的文件大小限制,以及上传路径等设置。 最后,如果需要展示本地文件,可以使用uni.previewImage和uni.openDocument。前者可以用于预览图片,后者可以用于打开各种格式的文档。在使用这些API时,需要注意文件路径和格式的设置。 总的来说,Uniapp提供了丰富的API,可以轻松实现选择本地文件的功能。但是,在具体开发时还需要考虑到实际情况,比如安全性、用户体验等因素,从而给用户带来更好的使用体验。 ### 回答3: 在Uniapp中选择本地文件有两种方式:使用原生的文件选择器和使用uni-ui中的uploader组件。 使用原生的文件选择器 1. 在页面中添加一个按钮,绑定点击事件。 2. 在点击事件中使用uni.chooseImage或uni.chooseFile方法打开文件选择器。 3. 在选择完文件后,会返回一个tempFilePaths数组或tempFiles数组,里面包含了所选择的文件的本地路径。 4. 在代码中可以将选择的文件路径传递到后端进行上传等操作。 使用uni-ui中的uploader组件 1. 在需要使用上传功能的页面中,引入uni-ui组件库。 2. 在template中添加一个uploader组件,设置上传路径、上传成功后的回调函数、上传文件类型等相关配置。 3. 在js文件中通过this.$refs.uploader.upload方法触发上传操作。 4. 上传成功后会执行回调函数,并返回成功的响应信息。 总结 以上两种方法都可以实现在Uniapp中选择本地文件的功能,使用原生的文件选择器更加灵活,可根据具体业务需求来选择要上传的文件类型,也可以轻松地实现多文件上传。使用uni-ui中的uploader组件,使用起来比较简单,可以快速实现文件上传功能,但是需要注意的是该组件只支持上传单个文件。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值