在Vue中调用微信上传图片功能
效果
说明
后台微信参数获取（略）
上传流程
点击图片控件位置，进行选择图片选择相机拍照或图库上传上传完成显示到图片控件
开发流程
引入weixin插件页面初始化时获取微信认证参数【参数后台服务提供】，获取本页地址图片点击事件进行图片上传、图片回显操作后台从微信服务器中下载上传的图片到自己的服务器
代码
vue中引入weixin插件
npm install weixin-js-sdk --save
页面图片控件
<img :src="imgURL" style="width: 90px;height: 90px" @click="addVipImage()"/>
数据
data() {
return {
URL: '',
serverPrefix: "后台获取微信参数的接口地址?url=",
imgURL: '',
}
},
挂载方法中获取本页地址及初始化微信参数
mounted: function () {
//获取本页地址
this.URL = location.href.split("#")[0];
//获取微信参数
this.wxConfig();
},
wxConfig() {
let self = this;
let url = this.serverPrefix + this.URL;
this.$ajax.post(url).then(
function (data) {
if (data.status == 200) {
var jsondata = data.data;
//【注-------------这里根据自己后台的返回的数据做相应的调整---------------】
if (jsondata.code === 200) {
wx.config({
// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
debug: false,
// 必填，公众号的唯一标识
appId: jsondata.model.appId,
// 必填，生成签名的时间戳
timestamp: "" + jsondata.model.timestamp,
// 必填，生成签名的随机串
nonceStr: jsondata.model.nonceStr,
// 必填，签名
signature: jsondata.model.signature,
// 必填，需要使用的JS接口列表
jsApiList: [
"chooseImage", //拍照或从手机相册中选图接口
"previewImage", //预览图片接口
"uploadImage", //上传图片接口
"downloadImage" //下载图片接口
]
});
}
}
},
function (data) {
var jsondata = data.body;
}
);
},
点击图片上传事件
addVipImage: function () {
let self = this;
wx.chooseImage({
count: 1, //张数， 默认9
sizeType: ["compressed"], //建议压缩图
sourceType: ["album", "camera"], // 来源是相册、相机
success: function (res) {
self.imgURL = res.localIds[0];
self.uploadToWeixinServer(res.localIds[0]);
}
});
},
uploadToWeixinServer(localId) {
let self = this;
wx.uploadImage({
localId: localId,
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
//res.serverId 返回图片的微信服务器端ID
self.add_vip.serverId = res.serverId;
}
});
},
后台从微信服务器上下载上传的图片
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
public class WeixinImageUtils {
public static String saveImageToDisk(String accessToken,String mediaId, String picName, String picPath) throws Exception {
InputStream inputStream = getInputStream(accessToken, mediaId);
// 循环取出流中的数据
byte[] data = new byte[1024];
int len = 0;
FileOutputStream fileOutputStream = null;
String filePath = picPath + picName + ".jpg";
try {
fileOutputStream = new FileOutputStream(filePath);
while ((len = inputStream.read(data)) != -1) {
fileOutputStream.write(data, 0, len);
}
} catch (IOException e) {
} finally {
if (inputStream != null) {
try {
inputStream.close();
} catch (IOException e) {
}
}
if (fileOutputStream != null) {
try {
fileOutputStream.close();
} catch (IOException e) {
}
}
}
return filePath;
}
private static InputStream getInputStream(String accessToken, String mediaId) {
InputStream is = null;
String url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" + accessToken + "&media_id=" + mediaId;
try {
URL urlGet = new URL(url);
HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();
http.setRequestMethod("GET"); // 必须是get方式请求
http.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
http.setDoOutput(true);
http.setDoInput(true);
System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒
System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒
http.connect();
// 获取文件转化为byte流
is = http.getInputStream();
} catch (Exception e) {
}
return is;
}
}
