小程序优势是啥_微信小程序上传多图到效劳器并

日期:2021-01-07 类型:行业动态 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

微信小程序上传多图到服务器并获取返回的路径       这篇文章主要介绍了微信小程序上传多图到服务器并获取返回的路径,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { that.setData({ tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基础上进行拼接 },

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

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

 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: '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,这样就会解决问题,可以实现上传,但是删除的时候需要把上传的也删除掉,而不是单单的吧集合里面的删除掉。

源码:

// ment/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.Id+"infoID")
 this.setData({
 infoId: Id,
 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(Id + "infoID不能用?")
 wx.request({
 url: 'saveComments',
 method: 'POST',
 header: {
 'content-type': 'application/json',
 'user-token': 'OXJ*****',//usertoken
 data: {
 relevantId: Id,
 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= ' + Id
 // })
 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: '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: '图片加载失败',
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。