一，js代码：
<template>
<view>
<image mode="aspectFit" :src="imageSrc" @tap="chooseImage"
style="background: gray; width:200rpx;height:200rpx;margin-left: 275rpx;" />
<button style="width:550rpx;margin-left: 100rpx;margin-top: 30rpx;"
type="primary" @tap="chooseImage">选择图片</button>
<button style="width:550rpx;margin-left: 100rpx;margin-top: 30rpx;"
type="primary" @tap="upload">上传图片</button>
</view>
</template>
<script>
export default {
data() {
return {
imageSrc:'',
}
},
methods: {
chooseImage(){
uni.chooseImage({
count: 1,
sizeType:['copressed'],
success:res => { //注意此处的写法，否则可能不能预览
//只有一张图片， 输出下标[0]， 直接输出地址
var imgFile = res.tempFilePaths[0];
console.log(imgFile);
this.imageSrc = imgFile;
}
})
},
upload(){
console.log("filepath:");
console.log(this.imageSrc);
if (this.imageSrc == '') {
//console.log();
let tip = '未选择图片文件!';
uni.showToast({
title:tip,
icon:"error",
})
return false;
}
uni.uploadFile({
url: '/api/goods/uploadone', //接口地址
filePath: this.imageSrc,
name: 'file',
formData: {
'user': 'test'
},
success: (res) => {
let data = JSON.parse(res.data);
if (data.code == 0){
alert("上传成功:"+data.data.url);
} else {
alert("上传出错:"+data.msg);
}
}
});
}
}
}
</script>
<style>
</style>
说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: [email protected]
二，服务端php代码:
class Goods extends BaseController
{
//上传单一文件
public function uploadOne() {
$file = request()->file('file');
if (is_null($file)) {
return Result::ErrorCode(11,'没有文件上传');
}
$size = $file->getSize();
$path = $file->getPathname();
if (is_file($path)){
$ext = strtolower($file->getOriginalExtension());
if (trim($ext) == '') {
return Result::ErrorCode(1012,'文件名有错误');
}
$newName = date('YmdHis').rand(1000,9999);
$newName = $newName . '.' . $ext;
$destDir = "/var/www/html/head";
//移动文件到指定目录，并重命名为新文件名
$file->move($destDir, $newName);
//$user = $this->request->param('user','','string');
// var_dump($user);
$imgUrl = "http://file.lhdtest.com/head/".$newName;
$res = ['url'=>$imgUrl];
return Result::Success($res);
} else {
return Result::ErrorCode(1011,'文件不存在');
}
}
三，测试效果:
四,查看hbuilderx的版本:
标签：return,newName,res,app,3.7,file,thinkphp,uni,data
From： https://www.cnblogs.com/architectforest/p/17218768.html