wx小程序上传图片到服务器,预览,下载

本文介绍了如何在小程序中实现图片上传到SpringBoot服务器,并进行预览和下载。通过调整SpringBoot的启动类注解解决未连接数据库时的报错问题,以及配置虚拟路径解决访问图片需重启服务器的问题。
摘要由CSDN通过智能技术生成

小程序代码

index.wxml

	<view>
        <button bindtap="upload">点击上传封面</button>
    </view>

index.js

/上传图片
    // 上传照片
    upload: function () {
        //选择图片
        wx.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['album', 'camera'],
            success: function (res) {
                wx.showLoading({
                    title: '上传中',
                })
                //获取图片临时地址
                const filePath = res.tempFilePaths[0]
                // 自定义云端的图片名称
                const fileName = Math.floor(Math.random() * 1000000) + filePath.match(/.[^.]+?$/)[0]
                console.log(fileName);
                // 上传到服务器存储空间
                var uploadTask=wx.uploadFile({
                    url: 'http://localhost:8080/imgUpload?fileName='+fileName,
                    
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在微信小程序中上传文件,你可以使用 `wx.chooseImage` 或 `wx.chooseFile` 方法来上传图片或其他文件。 1. `wx.chooseImage` 方法可以让用户选择图片并上传至服务器,代码示例: ```js wx.chooseImage({ count: 1, // 最多可以选择的图片张数,默认1张 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePaths可作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths; wx.uploadFile({ url: '服务器地址', // 上传接口地址 filePath: tempFilePaths[0], // 上传文件路径 name: 'file', // 上传文件名称 success: function (res) { // 上传成功后的处理逻辑 } }) } }) ``` 2. `wx.chooseFile` 方法可以让用户选择文件并上传至服务器,代码示例: ```js wx.chooseFile({ success(res) { // 选择文件后的处理逻辑 wx.uploadFile({ url: '服务器地址', // 上传接口地址 filePath: res.tempFilePaths[0], // 上传文件路径 name: 'file', // 上传文件名称 success: function (res) { // 上传成功后的处理逻辑 } }) } }) ``` 要预览上传的图片或文件,可以使用 `wx.previewImage` 方法来预览图片,代码示例: ```js wx.previewImage({ current: '当前图片的url', // 当前显示图片的链接,不填则默认为urls的第一张 urls: ['图片1的url', '图片2的url'] // 需要预览的图片链接列表 }) ``` 对于其他类型的文件,可以使用 `wx.openDocument` 方法来打开预览,代码示例: ```js wx.openDocument({ filePath: '文件的本地路径', success: function (res) { // 打开文档成功的处理逻辑 } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值