学习记录：小程序图片上传至服务器

学习记录（1）：小程序图片上传至服务器

微信小程序是一个前端与服务器分离的应用程序。因此上传文件有两种方式：一种是通过域名远程上传；一种是通过创建本地服务器实现文件的上传。
小程序可以通过wx.uploadFile(object)将本地资源上传到服务器。
页面如图所示
首先，通过“点击访问”按钮确认是否获取服务器请求对象，出现下图证明请求成功。
上传文件，先通过“To choose File”获取本地图片，再通过“Upload”上传文件。如下系列图所示

废话不多说，上代码

index.wxml

<view class="FileUploadContainer"><view class="title">Upload File</view><button bindtap="click">点击访问</button><!--文件上传--><view class="demo-box"><image wx:if="{{src}}" src="{{src}}" mode="aspectFit"></image><button bindtap="chooseImage">To choose File</button><button type="primary" bindtap="UploadFile">Upload</button></view><!--文件下载--><view><button type="primary" bindtap="DownloadFile">Download</button><image mode="aspectFit" wx:if="{{img}}" src="{{img}}" bindtap="previewImage"></image><button type="primary" bindtap="reset">Reset</button></view>
</view>

index.js

Page({data: {src:'',//上传图片路径img:''},/*** 查看是否能连接到服务器*/click:function(){wx.request({url: 'http://10.111.211.211:8083/MyWeb_war/MyServlet',data:{message:"message from wechat"},method:'GET',success:(res)=>{if(res.statusCode==200){console.log(res.data)}if(res.statusCode==404){wx.showToast({title: '找不到请求对象',icon:none})}},fail:(res)=>{console.log("请求失败")}})},chooseImage:function(){var that=this;wx.chooseImage({count: 1,sizeType: ['original','compressed'],//指定是原图还是压缩图，默认二者都有sourceType: ['album','camera'],//指定是相册还是相机，默认二者都有success:(res)=>{let src=res.tempFilePaths[0];console.log(src);that.setData({src:src})}})},UploadFile:function(){var that=this;let src=this.data.src;console.log(src);if(src==''){wx.showToast({title: 'Plase choose file',icon:'none'})}else{var uploadTask=wx.uploadFile({filePath: src,name: 'file',url: 'http://10.111.211.211:8083/MyWeb_war/UpLoadServlet',formData:{'filename':'fmw081418108.jpg'},success:function(res){console.log('[上传文件] 成功：', res)wx.showToast({title: 'res.data',})},fail: function (res) {console.log('上传失败');}})uploadTask.onProgressUpdate((res)=>{console.log('上传进度',res.progress)console.log('已经上传的数据长度',res.totalBytesSent)console.log('与其需要上传的数据总长度',res.totalBytesExpectedToSend)})}},previewImage:function(){wx.previewImage({current:this.data.img,urls:this.data.img})},DownloadFile:function(){var that=this;var filename="fmw081418108.jpg";var downloadTask = wx.downloadFile({url: 'http://10.111.211.211:8083/MyWeb_war/DownLoadServlet?filename',success:(res)=>{if(res.statusCode==200){console.log("下载成功");wx.playVoice({filePath: res.tempFilePath});let img=res.tempFilePath;console.log(res);that.setData({img:img})}else{console.log("下载失败",res.statusCode);}}})downloadTask.onProgressUpdate((res) => {console.log('下载进度', res.progress)console.log('已经下载的数据长度', res.totalBytesWritten)console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)})}
})

学习记录：小程序图片上传至服务器相关推荐

小程序图片上传到服务器
updata() { var that = this ; wx.chooseImage({ //微信封装的选择本地图片或相机拍照的API count : 1, //图片上传的数量 sizeType:[ ...
微信小程序图片上传到服务器再自动替换,微信小程序批量上传图片到服务器，并实现预览，删除功能...
js代码 Page({ /** 页面的初始数据 / data: { files: [], //门店图片信息,数组图片保存作为数据源 }, /* 多图片上传 */ chooseImage: functi ...
**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...
小程序图片上传和Promise.all
之前写过一篇ES6异步处理方式: Promise / async await,对Promise和async await 有了简单的理解,但后来才发现我的理解太浅了,只是记录了基本知识而已. 在上家公司 ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...
微信小程序图片上传（文字识别）
要点:OCR文字识别图片上传在最近的项目中遇到需要进行OCR识别,中间遇到的坑记录一下 OCR接口:采用百度OCR通用文字识别在进行调试过程中遇到下列问题: 百度ocr接口1.对图片经行base ...
java 微信图片上传_微信小程序图片上传java端以及前端实现
小程序的图片上传与传统的图片上传方式有一些不一样如果你有幸看到这篇文章,恭喜你,你可以完美解决了. 话不多说,前后端代码一并奉上: (基于springmvc ) @Controller @Reque ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
微信小程序图片上传与内容安全审核
文章目录原由内容审核种类小程序云开发图片检测创建云函数编写图片检测代码小程序图片处理图片上传图片压缩云函数安全检测接入文本检测最后的坑原由之前有开发一个微信小程序,拥有图片 ...
uniApp 生成微信小程序图片上传提示 fail url not in domain list 的解决方法
问题表现: uniApp 生成微信小程序,获取内容程序不报错,但是图片上传提示 fail url not in domain list 错误. 问题分析: 微信小程序:服务器域名配置每个微信小程序需 ...

学习记录：小程序图片上传至服务器

学习记录（1）：小程序图片上传至服务器

学习记录：小程序图片上传至服务器相关推荐

最新文章

热门文章