拿图片上传实例进行讲解
1、首先电脑和手机需要处于同一网络中
2、调整vs项目的配置,让其支持IP+端口的模式进行远程访问
3、修改手机调用地址为电脑的IP和端口
获取电脑IP地址
修改VS项目的配置
打开工程根目录显示隐藏文件夹找到【.vs】文件夹,并打开以下路径找到\.vs\config\applicationhost.config
修改以下配置节,增加一个binding的配置
uni-App 代码如下
<template>
<view>
<progress :percent="percent" strock-width="10"></progress>
<button type="primary" @tap="cI">chooseImg</button>
</view>
</template>
<script>
export default {
data() {
return {
percent: 0
}
},
onLoad() {
},
methods: {
cI: function() {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
success(res) {
//因为有一张图片, 输出下标[0], 直接输出地址
var imgFiles = res.tempFilePaths[0]
console.log( res.tempFilePaths)
// 上传图片
// 做成一个上传对象
uni.uploadFile({
url: 'http://172.20.10.2:1879/api/FileUpload-uni', //后端api接口
filePath: res.tempFilePaths[0], // uni.chooseImage函数调用后获取的本地文件路劲
name: 'file', //后端通过'file'获取上传的文件对象
success: (res) => {
console.log(res)
},
fail: (err) => {
console.log('uploadImage fail', err);
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
});
}
})
}
}
}
</script>
<style>
</style>
C# 后端代码如下
/// <summary>
/// 上传文件
/// </summary>
/// <returns></returns>
[HttpPost]
[Route("api/FileUpload-uni")]
public string PostFilesUni()
{
string result = "";
try
{
Dat_App_FasManageBLL operaInfo = new Dat_App_FasManageBLL();
HttpFileCollection filelist = HttpContext.Current.Request.Files;
if (filelist != null && filelist.Count > 0)
{
for (int i = 0; i < filelist.Count; i++)
{
HttpPostedFile file = filelist[i];
string filename = file.FileName;
string fileExt = GetFileExt(filename);
string FilePath = operaInfo.GetSavePhotoPathInfo();
DirectoryInfo di = new DirectoryInfo(FilePath);
if (!di.Exists) { di.Create(); }
try
{
file.SaveAs(FilePath + "\\" + filename);
if (true)
{
MakeThumbnailImage(FilePath + "\\" + filename , FilePath + "\\" + filename , 640, 480, "H");
}
}
catch (Exception ex)
{
result = "上传文件写入失败:" + ex.Message;
}
}
}
else
{
result = "上传的文件信息不存在!";
}
}
catch (Exception ex)
{
CommanHelper.LogInfo.WriteMessage(ex.Message);
throw;
}
return result;
}
到此就算全部完成,在调试时候可以直接在手机端操作电脑进行实时数据调试,希望能帮到你!!!