以下为wxml
<view class='clearFloat'>
<view class='upload_title'>头像展示（必填）
<span class="basic_title_desc">（选一张好看的个人照片可以增加客户点击的机会哦）
span>
view>
<view class='healthCertImg'>
<view class='imgrelative' wx:if="{{headIconArr}}" wx:for="{{headIconArr}}" wx:for-index="index" wx:for-item="item" wx:key="*this">
<image class="image uploadimg" src="{{imgPath+item.key}}" mode="aspectFit" id="{{imgPath+item.key}}" catchtap='previewHeadIcon'>{{item}}image>
<van-icon name="clear" custom-style="color:#979797;position:absolute;right:-20rpx;top:-20rpx;" id="{{index}}" bind:click="deleteHeadIcon" />
view>
<image src='../../imgs/upload.png' class='uploadimg upload_jkz' catchtap='headIcon' wx:if="{{IsHeadIcon}}">image>
view>
view>
以下为js
const util = require('../../utils/util.js');
const qiniuUploader = require("../../utils/qiniuUploader");
// 头像展示上传图片
headIcon() {
var that = this
that.chooesImage(that, 1, function(res) {
that.data.headIconArr.push(res)
// console.log(that.data.ysCertImgArr.length)
if (that.data.headIconArr.length >= 1) {
that.setData({
IsHeadIcon: false
});
}
that.setData({
headIconArr: that.data.headIconArr
});
})
},
// 头像展示预览与删除
previewHeadIcon(e) {
this._previewImage(e, this.data.headIconArr)
},
deleteHeadIcon(e) {
var that = this
that._deleteImage(e, that.data.headIconArr, function(files) {
that.setData({
headIconArr: files,
IsHeadIcon: true
});
})
},
/*图片上传*/
chooesImage(that, count, callback) {
util.didPressChooesImage(that, count, function(filePath) {
qiniuUploader.upload(filePath, (res) => {
console.log(res)
callback(res)
that.checkSubmit()
}, (error) => {
console.error('error: ' + JSON.stringify(error));
},
null, // 可以使用上述参数，或者使用 null 作为参数占位符
(progress) => {
// console.log('上传进度', progress.progress)
// console.log('已经上传的数据长度', progress.totalBytesSent)
// console.log('预期需要上传的数据总长度', progress.totalBytesExpectedToSend)
}, cancelTask => that.setData({
cancelTask
})
);
})
},
/*图片预览*/
_previewImage: function(e, arr) {
var preUlrs = [];
console.log(arr)
const imgPath = 'https://cdn.wutongdaojia.com/'
arr.map(
function(value, index) {
var key = imgPath + value.key
preUlrs.push(key);
}
);
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: preUlrs // 需要预览的图片http链接列表
})
},
/*图片删除*/
_deleteImage: function(e, arr, callback) {
var that = this;
var files = arr;
var index = e.currentTarget.dataset.index; //获取当前长按图片下标
console.log(index)
wx.showModal({
title: '提示',
content: '确定要删除此图片吗？',
success: function(res) {
if (res.confirm) {
files.splice(index, 1);
console.log(files)
} else if (res.cancel) {
return false;
}
// files,
that.setData({
isCanAddFile: true
});
that.checkSubmit()
callback(files)
}
})
},
以下为封装的七牛云上传图片方法（util.js）
const qiniuUploader = require("./qiniuUploader");
import api from './api.js';
const getUploadToken = () => {
var params = {
token: wx.getStorageSync('token')
}
api.ajax("GET", params, "/weixin/getUploadToken").then(res => {
console.log(res.data)
initQiniu(res.data)
});
}
// 初始化七牛相关参数
const initQiniu = (uptoken) => {
var options = {
region: 'NCN', // 华北区
// uptokenURL: 'https://[yourserver.com]/api/uptoken',
// cdn.wutongdaojia.com
// uptokenURL: 'http://upload-z1.qiniup.com',
// uptokenURL: 'https://yuesao.wutongdaojia.com/weixin/getUploadToken',
// uptoken: 'xxx',
uptoken: uptoken,
// domain: 'http://[yourBucketId].bkt.clouddn.com',
domain: 'image.bkt.clouddn.com', // image为七牛云后台创建的空间
shouldUseQiniuFileName: false
};
qiniuUploader.init(options);
}
export function didPressChooesImage(that, count, callback) {
getUploadToken();
// 微信 API 选文件
wx.chooseImage({
count: count,
success: function(res) {
console.log(res)
var filePath = res.tempFilePaths[0];
console.log(filePath)
callback(filePath)
// 交给七牛上传
}
})
}
/**
* 文件上传
* 服务器端上传：http(s)://up.qiniup.com
* 客户端上传： http(s)://upload.qiniup.com
* cdn.wutongdaojia.com
*/
function uploader(file, callback) {
initQiniu();
qiniuUploader.upload(filePath, (res) => {
// 每个文件上传成功后,处理相关的事情
// 其中 info 是文件上传成功后，服务端返回的json，形式如
// {
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
// "key": "gogopher.jpg"
// }
// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
that.setData({
'imageURL': res.imageURL,
});
}, (error) => {
console.log('error: ' + error);
},
// , {
// region: 'NCN', // 华北区
// uptokenURL: 'https://[yourserver.com]/api/uptoken',
// domain: 'http://[yourBucketId].bkt.clouddn.com',
// shouldUseQiniuFileName: false
// key: 'testKeyNameLSAKDKASJDHKAS'
// uptokenURL: 'myServer.com/api/uptoken'
// }
null, // 可以使用上述参数，或者使用 null 作为参数占位符
(res) => {
console.log('上传进度', res.progress)
console.log('已经上传的数据长度', res.totalBytesSent)
console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
});
};
module.exports = {
initQiniu: initQiniu,
getUploadToken: getUploadToken,
didPressChooesImage: didPressChooesImage
}
封装ajax（api.js）
const ajax = (Type, params, url) => {
var methonType = "application/json";
// var https = "http://www.wutongdaojia.com"
var https = "https://yuesao.wutongdaojia.com"
var st = new Date().getTime()
if (Type == "POST") {
methonType = "application/x-www-form-urlencoded"
}
return new Promise(function (resolve, reject) {
wx.request({
url: https + url,
method: Type,
data: params,
header: {
'content-type': methonType,
'Muses-Timestamp': st,
'version': 'v1.0' // 版本号
// 'Muses-Signature': sign
},
success: function (res) {
// if (res.statusCode != 200) {
// reject({ error: '服务器忙，请稍后重试', code: 500 });
// return;
// }
// resolve(res.data);
wx.hideLoading()
console.log(res)
if (res.data.status == 200) {
resolve(res.data);
} else if (res.data.status == 400) {
wx.showToast({
title: res.data.message,
icon: 'none',
duration: 1000
})
return
} else if (res.data.status == 401){
wx.removeStorageSync('phone')
wx.removeStorageSync('token')
wx.showToast({
title: res.data.message,
icon: 'none',
duration: 1000,
success:function(){
wx.navigateTo({
url: '../login/index',
})
}
})
return
} else {
//错误信息处理
wx.showToast({
title: '服务器错误，请联系客服',
icon: 'none',
duration: 1000
})
}
},
fail: function (res) {
// fail调用接口失败
reject({ error: '网络错误', code: 0 });
},
complete: function (res) {
// complete
}
})
})
}
