视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
微信小程序上传多图到服务器并获取返回的路径
2020-11-27 21:57:42 责编:小采
文档

微信小程序上传图片很简单:

//点击选择图片
 chooseimage:function(){
 var that = this;
 wx.chooseImage({
 count: 9, // 默认9 
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 
 success: function(res) {
 that.setData({
 tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基础上进行拼接
 })
 }
 })
 },

这里的setData里面是当你选择照片之后,再一次出发函数时候,会在原有的基础上增加照片,而不是覆盖掉,有兴趣可以看一下concat的含义

这里就选择了照片,可以显示在界面上

 <image class="icon-image" background-size="contain" wx:for="{{tempFilePaths}}" src='{{item}}' 
 data-id='{{index}}' bindtap='delete'></image>

效果图:


然后是多图上传的过程,这里我上传到公司oss里面,源码:

 upload:function(){
 for (var i = 0; i < this.data.tempFilePaths.length; i++) {
 // console.log("000")
 this.upload_file(this.data.tempFilePaths[i])
 }
 },
 upload_file: function (filepath) {
 var that = this;
 wx.uploadFile({
 url: 'https://***********************/imgs',
 header: {
 'content-type': 'multipart/form-data'
 },
 filePath: filepath,
 name: 'file',
 formData: {
 file: filepath
 },
 success:function(res){
 that.setData({
 mes:JSON.parse(res.data),
 images: that.data.images.concat(JSON.parse(res.data).data.filePath)//把字符串解析成对象
 })
 // console.log(that.data.mes.data.filePath)
 // console.log(that.data.images.length + "**********")
 // wx.showToast({
 // title: 'success',
 // })
 },
 fail: function (res) {
 wx.showToast({
 title: '图片加载失败',
 })
 }
 })
 }

其实到这里都没有太大的问题。

但是当我点击提交的时候,就会出现图片为空的问题,这是因为,我们在提交的事件中肯定是先写上传图片的方法,

让后是提交的方法,但是由于微信小程序是异步,在for循环没有执行完就触发了提交的事件,这造成图片为空的问题。

我搜了很多答案出来,但是由于是接触不久,完全没看懂,什么Promis之类的,只能自己想办法,就在选择图片的时候就把图片上传了,然后返回路径:

 //点击选择图片
 chooseimage:function(){
 var that = this;
 wx.chooseImage({
 count: 9, // 默认9 
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 
 success: function(res) {
 that.setData({
 tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基础上进行拼接
 })
 that.upload();
 that.setData({
 temp: that.data.tempFilePaths.length//用来解决 for 循环比 异步 快
 })
 }
 })
 },
upload:function(){
 for (var i = this.data.temp; i < this.data.tempFilePaths.length; i++) {
 // console.log("000")
 this.upload_file(this.data.tempFilePaths[i])
 }
 },

你会发现我加了一个temp,这样就会解决问题,可以实现上传,但是删除的时候需要把上传的也删除掉,而不是单单的吧集合里面的删除掉。

源码:

// pages/comment/cmment.js
const app = getApp()
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 mes:{},
 content:'',
 tempFilePaths:[],
 userInfo: {},
 hasUserInfo: false,
 canIUse: wx.canIUse('button.open-type.getUserInfo'),
 images:[],
 temp:0,
 infoId:'',
 sendtype:''
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 console.log(options.infoId+"infoID")
 this.setData({
 infoId: options.infoId,
 sendtype: options.sendtype
 }) 
 
 },
 /**
 * 页面上拉触底事件的处理函数
 */ 
 onReachBottom: function () {
 
 },
 confirmSubmit:function(e){
 
 console.log(e.detail.value)
 },
 
 //点击选择图片
 chooseimage:function(){
 var that = this;
 wx.chooseImage({
 count: 9, // 默认9 
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 
 success: function(res) {
 that.setData({
 tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基础上进行拼接
 })
 that.upload();
 that.setData({
 temp: that.data.tempFilePaths.length//用来解决 for 循环比 异步 快
 })
 }
 })
 },
 //点击删除图片
 delete: function (e){
 var index = e.currentTarget.dataset.id;
 this.data.tempFilePaths.splice(index,1)
 //渲染数据
 this.setData({
 tempFilePaths: this.data.tempFilePaths
 })
 },
 //提交评论
 formBindsubmit: function (e) {
 // console.log(this.data.images.length + "*****");
 // for (var i = 0; i < this.data.images.length; i++){
 // console.log(this.data.images[i]);
 // }
 console.log(this.data.infoId + "infoID不能用?")
 wx.request({
 url: 'https://*******/saveComments',
 method: 'POST',
 header: {
 'content-type': 'application/json',
 'user-token': 'OXJ*****',//usertoken
 },
 data: {
 relevantId: this.data.infoId,
 type: 1,//this.data.type,
 content:e.detail.value.content,
 images:this.data.images,
 },
 success: function (res) {
 if (res.statusCode = 200) {
 wx.showModal({
 title: '提示',
 content: '评论成功',
 })
 return;
 }
 else {
 wx.showModal({
 title: '提示',
 content: '评论失败',
 })
 }
 }
 })
 // wx.navigateTo({
 // url: '../article/article?id= ' + this.data.infoId
 // })
 },
 upload:function(){
 for (var i = this.data.temp; i < this.data.tempFilePaths.length; i++) {
 // console.log("000")
 this.upload_file(this.data.tempFilePaths[i])
 }
 },
 upload_file: function (filepath) {
 var that = this;
 wx.uploadFile({
 url: 'https://********/fileupload/uploader/imgs',
 header: {
 'content-type': 'multipart/form-data'
 },
 filePath: filepath,
 name: 'file',
 formData: {
 file: filepath
 },
 success:function(res){
 that.setData({
 mes:JSON.parse(res.data),
 images: that.data.images.concat(JSON.parse(res.data).data.filePath)//把字符串解析成对象
 })
 // console.log(that.data.mes.data.filePath)
 // console.log(that.data.images.length + "**********")
 // wx.showToast({
 // title: 'success',
 // })
 },
 fail: function (res) {
 wx.showToast({
 title: '图片加载失败',
 })
 }
 })
 }
})

下载本文
显示全文
专题