小程序上传图片到服务器，微信小程序怎样使图片上传至服务器
大家好，今天小编来为大家解答小程序上传图片到服务器这个问题，微信小程序怎样使图片上传至服务器很多人还不知道，现在让我们一起来看看吧！
小程序图片如何使用云服务器的
众所周知，小程序的大小限制在2M，我手头上这个项目目前已经不小了，因此时常出现超过2M上传不了代码的情况，为了解决这个问题，我曾经把项目的图片尽可能的去做了压缩，可是省下来的空间永远赶不上需求的增加，很快就又会出现这个问题，很是头大，就是那种眼看着自己辛苦写出来的代码还不能面世的尴尬，心痛的很，那么有人说了小程序不是提供了分包加载吗？是的嘞，但是我目前使用的是wepyjs的框架，对于基于这个的分包实在是没琢磨透，所以没敢轻举妄动，因为就想到了把本地图片放到服务器上的办法，哈哈~也算是笨人有笨办法吧，嘻嘻。。。
那么接下来就来说我是怎么处理的，其实还是很简单的。
首先，让后台的小伙伴协助把图片放到对象项目的域名上，那么这个图片对于我们来说就相当于项目的接口一样了，在使用的时候只需要把对应的接口域名拼接上即可啦，下面我们来看一个小例子：
图片已经请后台放到了服务器上了，那么负责任的后台呢会给你一个完整的图片链接给你做例子，让你去对应的修改你所需要的图片。
如上图，这就是我们后台把图片放到服务器上给我发的一个链接例子，正如你们所看到的，我掩盖到的部分就是项目的域名，Picture是服务器上放图片的文件夹，然后就是对应图片的名称。
所以这样看来就很简单了吧，我得具体做法是：
在app.wpy文件的onload中，给globalData附上服务器图片的公共域名链接的前半段，然后在其他wpy文件中，直接在onload中把globalData赋值给当前页的一个data值使用即可。
小程序代码如何上传到服务器
一般通过开发者工具设置对应的服务器信息点击上传进行代码上传到服务器上。
目前的小程序的开发者工具功能都很强大，好多东西只需要设置好，执行的过程有开发者工具本身自动完成，像小程序代码上传更新就可以通过一键上传达到效果。
微信小程序怎样使图片上传至服务器
这次给大家带来微信小程序怎样使图片上传至服务器，微信小程序使图片上传至服务器的注意事项有哪些，下面就是实战案例，一起来看一下。
-wxml
<view class="shangchuan" bindtap="choose">
<image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image>
</view>
<button formType='submit' class="fabu">发布项目</button>
/**选择图片*/
choose: function(){
var that= this
wx.chooseImage({
count: 1,
sizeType: ['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType: ['album','camera'],//可以指定来源是相册还是相机，默认二者都有
success: function(res){
var tempFilePaths= res.tempFilePaths
that.setData({
tempFilePaths: res.tempFilePaths
})
console.log(res.tempFilePaths)
wx.setStorage({ key:"card", data: tempFilePaths[0]})
}
})
},
2.使用wx.uploadFile将刚才上传的图片上传到服务器上
formSubmit2: function(e){
var that= this
var card= wx.getStorageSync('card')
wx.uploadFile({
url: app.globalData.create_funds,
filePath: card,
name:'card',
formData:{
'user_id': app.globalData.user_id,
'person': e.detail.value.person,
'company': e.detail.value.company,
},
success: function(res){
console.log(res)
}
})
}
}
},
PS：微信小程序上传一或多张图片
一.要点
1.选取图片
wx.chooseImage({
sizeType: [],// original原图，compressed压缩图，默认二者都有
sourceType: [],// album从相册选图，camera使用相机，默认二者都有
success: function(res){
console.log(res);
var array= res.tempFilePaths,//图片的本地文件路径列表
}
})
2.上传图片
wx.uploadFile({
url:'',//开发者服务器的 url
filePath:'',//要上传文件资源的路径 String类型！！！
name:'uploadFile',//文件对应的 key,(后台接口规定的关于图片的请求参数)
header:{
'content-type':'multipart/form-data'
},//设置请求的 header
formData:{},// HTTP请求中其他额外的参数
success: function(res){
},
fail: function(res){
}
})
二.代码示例
//点击上传图片
upShopLogo: function(){
var that= this;
wx.showActionSheet({
itemList: ['从相册中选择','拍照'],
itemColor:"#f7982a",
success: function(res){
if(!res.cancel){
if(res.tapIndex== 0){
that.chooseWxImageShop('album')
} else if(res.tapIndex== 1){
that.chooseWxImageShop('camera')
}
}
}
})
},
chooseWxImageShop: function(type){
var that= this;
wx.chooseImage({
sizeType: ['original','compressed'],
sourceType: [type],
success: function(res){
/*上传单张
that.data.orderDetail.shopImage= res.tempFilePaths[0],
that.upload_file(API_URL+'shop/shopIcon', res.tempFilePaths[0])
*/
/*上传多张（遍历数组，一次传一张）
for(var index in res.tempFilePaths){
that.upload_file(API_URL+'shop/shopImage', res.tempFilePaths[index])
}
*/
}
})
},
upload_file: function(url, filePath){
var that= this;
wx.uploadFile({
url: url,
filePath: filePath,
name:'uploadFile',
header:{
'content-type':'multipart/form-data'
},//设置请求的 header
formData:{'shopId': wx.getStorageSync('shopId')},// HTTP请求中其他额外的 form data
success: function(res){
wx.showToast({
title:"图片修改成功",
icon:'success',
duration: 700
})
},
fail: function(res){
}
})
},相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
在ES6里模板字符串使用详解
在Bootstrap里怎么操作table
好了，文章到这里就结束啦，如果本次分享的小程序上传图片到服务器和微信小程序怎样使图片上传至服务器问题对您有所帮助，还望关注下本站哦！