前端代码:
//html uniapp 使用uni-file-picker组件获取图片
<uni-forms-item required label="故障照片:" name="err_pictures" label-width="70" class="item-height">
<view class="example-body">
<uni-file-picker limit="3" @select="handleFileSelect"
@delete="deleteFileSelect"></uni-file-picker>
</view>
</uni-forms-item>
//js
//选取图片
handleFileSelect(event) {
// 将新的对象数组合并到现有的 error_pictures 数组中
this.formData.error_pictures = this.formData.error_pictures.concat(event.tempFilePaths);
}
/** 上传图片
* @param {Object} fileId
*/
uploadPhotos(fileId) {
// TODO 必须将获取到的图片改成下面的格式提交到后端,不然后端是无法获取得到提交过去的图片数据,就算获取得到也只是二进制数据,无法获取图片相关信息
const imgs = this.formData.error_pictures.map((item, index) => {
return {
name: "image" + index,
uri: item, //注意这里是uri不是url,这里也不能出错,官方文档有写明
}
})
uni.uploadFile({
url: "接口url",
files: imgs,
header: {
"Authorization": "Bearer" + getToken(),
"Contant-Type": "multipart/form-data"
},
formData: {
fileType: "Device", //一些相关参数
fileId,
},
success: uploadFileRes => {
console.log("uploadFileRes.data", JSON.parse(uploadFileRes.data))
},
fail: err => {
console.log("uploadFileRes.err", err)
}
})
}
后端代码:
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json.Linq;
using System.Data;
using System.Data.SqlClient;
// 相关依赖,有些SaveDeviceImage里面可能没有用上
[HttpPost]
public async Task<TData<ActionResult>> SaveDeviceImage(IFormCollection formCollection)
{
TData<ActionResult> obj = new();
var fromData = Request.Form;
string fileType = fromData["fileType"];
string fileId = fromData["fileId"];
var result = await UploadImage(formCollection, fileType);
List<SqlParameter> listParam = new();
try
{
string sql = @"INSERT INTO dbo.Mes_pictures(Url, DeviceFixingId) VALUES (@NewUrl, @DeviceFixingId)";
listParam.Add(new SqlParameter("@NewUrl", string.Join(";", result)));
listParam.Add(new SqlParameter("@DeviceFixingId", fileId));
//这里是将图片的数据保存到数据库中
int count = await SQLHelper.ExecuteNonQueryAsync(SQLHelper.mesConnectionString, sql, CommandType.Text, listParam.ToArray());
obj.Tag = count > 0 ? 1 : 0;
}catch (Exception ex)
{
obj.Message = ex.Message;
return obj;
}
/* string base64String = Convert.ToBase64String(result.FilePath);
obj.Data = $"data:image/jpeg;base64,{base64String}";*/
return obj;
}
//保存图片到项目的某个文件夹下面
private async Task<List<string>> UploadImage(IFormCollection formCollection, string fileType)
{
FormFileCollection files = (FormFileCollection)formCollection.Files;
List<string> paths = new();
for (int i = 0; i < files.Count; i++)
{
var file = files[i];
if (file.Length < 0) break;
var uploadsFolderPath = Path.Combine(Directory.GetCurrentDirectory(), $"uploads/{fileType}");
if (!Directory.Exists(uploadsFolderPath))
{
Directory.CreateDirectory(uploadsFolderPath);
}
// 确保不覆盖现有文件
var uniqueFileName = Path.GetFileNameWithoutExtension(file.FileName) + "_" + Guid.NewGuid().ToString("N") + Path.GetExtension(file.FileName);
//生成路径
var filePath = Path.Combine(uploadsFolderPath, uniqueFileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(stream);
}
paths.Add(filePath);
}
return paths;
}