我用的是支付宝小程序，其实也和微信小程序差不多，如果是微信小程序的话，改一点点就可以了。
小程序端代码
前端部分
页面：
<!-- .axml文件 -->
<button onTap="uploadPhoto" size="default" type="primary">上传测试</button>
方法：
//.js文件
uploadPhoto() {
dd.chooseImage({
success: (res) => {
// console.log(res);
const tempFilePaths = res.apFilePaths;
dd.uploadFile({
/**
* @param string url:要上传的服务器api接口,填你自己的
* @param string filePath:上传文件的定位符，记得加上下标
* @param string fileName:文件name值，后端接收的时候要用到，不是文件名！！！
* @param string fileType:文件类型
* @param object header:HTTP请求header
* @param function success:请求成功后执行的方法
* @param function fail:请求失败后执行的方法
*/
url: 'http://www.xiaomaiquan.com/api/circleImage/upload',//这里填你自己的服务端api
filePath: tempFilePaths[0],
fileName: 'file',
fileType: 'image',
header: {
'content-type': 'multipart/form'
},
success: (res) => {
dd.alert({
content: '上传成功'
}),
console.log(res);
},
fail: (res) => {
dd.alert({
content: '上传失败111'
}),
// console.log(tempFilePaths[0])
console.log('失败', res)
}
})
}
})
}
- 上面的方法只能上传一张图片，如果要上传多张图片：
//多张图片上传，将方法执行写到for循环里面即可，循环次数为图片数组的长度
chooseImage() {
dd.chooseImage({
count: 9,
success: (res) => {
// console.log(this.data.id);
const tempFilePaths = res.apFilePaths;
var postId = this.data.id;
for(var i=0, h=tempFilePaths.length; i<h; i++){
dd.uploadFile({
/**
* @param string url:要上传的服务器api接口,填你自己的
* @param string filePath:上传文件的定位符，记得加上下标
* @param string fileName:文件name值，后端接收的时候要用到，不是文件名！！！
* @param string fileType:文件类型
* @param object header:HTTP请求header
* @param function success:请求成功后执行的方法
* @param function fail:请求失败后执行的方法
*/
url: `http://www.xiaomaiquan.com/api/circleImage/upload/${postId}`,
filePath: tempFilePaths[i],
fileName: 'image',
fileType: 'image',
header: {
'content-type': 'multipart/form'
},
success: (res) => {
//成功后返回主页
dd.navigateTo({
url: '../../../index/index'
})
// dd.alert({
// content: '上传图片成功'
// }),
// console.log(res);
},
fail: (res) => {
dd.alert({
content: '上传图片失败'
})
console.log('失败：',res);
}
})
}
}
})
}
后端部分
public function uploadImage(array $data){
//获取文件name值
$file = $data['file'];
if($file->isValid()){
$ext = $file->getClientOriginalExtension();
$file_name = date("YmdHis", time()).'-'.uniqid().'.'.$ext;
if(!in_array($ext, ['jpg', 'png', 'jpeg', 'gif'])) return response()->json(err('文件类型不是图片'));
//记得创一个文件夹放文件,我的是circle_post_img
$path = public_path().DIRECTORY_SEPARATOR.'uploads'.DIRECTORY_SEPARATOR.'circle_post_img'.DIRECTORY_SEPARATOR.date('Y').DIRECTORY_SEPARATOR.date('m').DIRECTORY_SEPARATOR.date('d').DIRECTORY_SEPARATOR;
$bool = $file->move($path,$file_name);
if($bool){
$img_path = '/uploads/circle_post_img/'.date('Y').'/'.date('m').'/'.date('d').'/'.$file_name;
$data = [
// 'domain_img_path'=>get_domain().$img_path,
'img_path'=>$img_path,
];
//返回图片路径
return $data;
}else{
return '获取图片路径失败';
}
}else{
return '图片上传失败';
}
}
效果如下
成功返回数据，这个时候可以可以根据返回数据来进行显示图片之类的操作了
网友评论