1首先页面调用上传图片函数
<view class="solids" @tap="uploadImage" v-if="imgList.length<1">
<text class='cuIcon-cameraadd'></text>
</view>
2uni.chooseImage触发选择图片,本地或者相机
// 选择图片
ChooseImage(e) {
this.picList = [];
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
success: (res) => {
console.log(res);
this.picSrc = res.tempFilePaths[0]; //后面还能用到 src 暂且留着
this.cradInfo.card_back_pic = res.tempFilePaths[0];
if (this.picList.length != 0) {
this.picList = this.picList.concat(res.tempFilePaths);
console.log(11111);
} else {
//上传图片到后台服务器
var _self = this;
uni.uploadFile({
url: baseUrl + uploadImg,
filePath: this.cradInfo.card_back_pic,
name: 'file',
success: function(r) {
//打印
var con = JSON.parse(r.data);
console.log(con);
console.log(con.data.path);
_self.cradInfo.card_back_pic = con.data.path;
}
});
this.picList = res.tempFilePaths
}
}
});
},
3uni.uploadFile方法把图片传到后台
uni.uploadFile({
url: baseUrl + uploadImg,
filePath: this.cradInfo.card_back_pic,
name: 'file',
success: function(r) {
//打印
var con = JSON.parse(r.data);
console.log(con);
console.log(con.data.path);
_self.cradInfo.card_back_pic = con.data.path;
}
});
4.后台处理接受的图片并保存
/**
* 上传图片
*/
public function uploadImage()
{
if (!empty($_FILES['file'])) {
$dir = "Public/Uploads/Card/";
//获取扩展名
$exename = $this->getExeName($_FILES['file']['name']);
if ($exename != 'png' && $exename != 'jpg' && $exename != 'gif') {
exit('不允许的扩展名');
}
$image_name = md5(date('YmdHis') . rand(1000, 9999)) . '.' . uniqid();
$imageSavePath = $dir . $image_name . '.' . $exename;
if (move_uploaded_file($_FILES['file']['tmp_name'], $imageSavePath)) {
$res = array(
'path' => $imageSavePath,
'data' => $imageSavePath
);
$this->apiResponse->show(200, '获取数据成功', $res);
} else {
$this->apiResponse->show(400, '获取数据失败');
}
}
}
public function getExeName($fileName)
{
$pathinfo = pathinfo($fileName);
return strtolower($pathinfo['extension']);
}
5返回路径后,前端表单提交保存即可